Make flexbox children 100% height of their parent

Question

I'm trying to fill the vertical space of a flex item inside a flexbox:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

And here's the JSFiddle

flex-2-child doesn't fill the required height except in the two cases where:

1. flex-2 has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome)
2. flex-2-child has a position absolute which is also inconvenient

This doesn't work in Chrome or Firefox currently.

Answer 1

I have answered a similar question here.

I know you have already said position: absolute; is inconvenient but it works. See below for further information on fixing the resize issue.

Also see this jsFiddle for a demo, although I have only added webkit prefixes so open in Chrome.

You basically have 2 issues which I will deal with separately.

1. Getting the child of a flex-item to fill height 100%
   • Set position: relative; on the parent of the child.
   • Set position: absolute; on the child.
   • You can then set width/height as required (100% in my sample).
2. Fixing the resize scrolling "quirk" in Chrome
   • Put overflow-y: auto; on the scrollable div.
   • The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify height: 0;

See this answer for more information on the scrolling issue.

Answer 2

This is my solution using css+

First of all if first child (flex-1) should be 100px shouldn't be flex. In css+ in fact you can set flexible and/or static elements (columns or rows) and your example become as easy as this:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

container css:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

and obviously include css+ 0.2 core

hear the fiddle

Answer 3

An idea would be that display:flex; with flex-direction: row; is filling the container div with .flex-1 and .flex-2, but that does not mean that .flex-2 has a default height:100%; even if it is extended to full height and to have a child element (.flex-2-child) with height:100%; you'll need to set the parent to height:100%; or use display:flex; with flex-direction: row; on the .flex-2 div too.

From what I know display:flex will not extend all your child elements height to 100%.

A small demo, removed the height from .flex-2-child and used display:flex; on .flex-2: http://jsfiddle.net/2ZDuE/3/

Answer 4

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

css

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

Answer 5

I suppose that Chrome's behavior is more consistent with the CSS spec (though it's less intuitive). According to Flexbox spec, the default stretch value of align-self property changes only the used value of the element's "cross size property" (height, in this case). And, as I understand the CSS2.1 spec, the percentage heights are calculated from the specified value of the parent's height, not its used value. The specified value of the parent's height isn't affected by any flex properties and is still auto.

Setting explicit height: 100% makes it formally possible to calculate the percentage height of the child, just like setting height: 100% to html makes it possible to calculate the percentage height of body in CSS2.1.

Answer 6

I found the solution by myself, suppose you have the CSS below:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

In this case, setting the height 100% will not work, so what I do is setting the margin-bottom rule to auto, like:

.child {
  margin-bottom: auto;
}

and the child will be aligned to the topmost of the parent, you can also use the align-self rule anyway if you prefer.

.child {
  align-self: flex-start;
}