Flexbox Container in Chrome Doesn't Get 100% Height

Flexbox container in Chrome doesn't get 100% height

You're missing a height: 100% on a parent element: <header>

Once you add that in, the layout works in Chrome, as well.

header {
   min-height: 100%;
   width: 100%;
   height: 100%; /* NEW */
}

Revised Codepen

When using percentage heights, Chrome requires that each parent element have a defined height. More details here:

Working with the CSS height property and percentage values

When using percentage heights in flexbox, there are rendering differences among the major browsers. More details here:

Chrome / Safari not filling 100% height of flex parent

Chrome / Safari not filling 100% height of flex parent

Solution

Use nested flex containers.

Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through.

Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand the full height of the parent.

Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100%), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto (full explanation).

Try this (no changes to HTML):

.container {    display: flex;    flex-direction: column;    height: 20em;    border: 5px solid black}
.item {    display: flex;                      /* new; nested flex container */    flex: 1;    border-bottom: 1px solid white;}
.item-inner {    display: flex;                      /* new; nested flex container */    flex: 1;                            /* new */
    /* height: 100%;                    <-- remove; unnecessary */    /* width: 100%;                     <-- remove; unnecessary */    /* display: table;                  <-- remove; unnecessary */  }
a {    display: flex;                      /* new; nested flex container */    flex: 1;                            /* new */    align-items: center;                /* new; vertically center text */    background: orange;
    /* display: table-cell;             <-- remove; unnecessary */    /* vertical-align: middle;          <-- remove; unnecessary */}

<div class="container">  <div class="item">    <div class="item-inner">      <a>Button</a>    </div>  </div>
  <div class="item">    <div class="item-inner">      <a>Button</a>    </div>  </div>
  <div class="item">    <div class="item-inner">      <a>Button</a>    </div>  </div></div>

How can I make Flexbox children 100% height of their parent?

Use `align-items: stretch`

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

flexbox with height: 100% doesn't work on chrome 72+

On chrome 72+ you need to set min-height on .holder. This is not required on versions before 72.

html, body {    height: 100%;    margin: 0;}

.flex {    height: 100%;    display: flex;    flex-direction: column;}
.body {    height: 100%;}
nav {    overflow: hidden;    flex-shrink: 0;    display: flex;    flex-direction: row;}
.holder {    display: flex;    flex-direction: column;    height: initial !important;    flex: 1;    min-height: 0;}
.wrapper {
    flex: 1;    display: flex;    min-height: 0;    overflow-y: auto;}

<div class="body">    <div class="flex"><!---->        <nav style="height: 40px; background-color: blue"></nav>        <!---->        <div class="holder body">            <div class="wrapper">                <div>                    <div class="holder">
                        <div>                            <br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br>v<br><br>v                        </div>                    </div>

                </div>

            </div>            <div>                <div style="height: 60px; background-color: red"></div>            </div>        </div>    </div></div>

Display flex not getting 100% height in firefox

What you mising is, you forget making the td height 100% too. So you need add css for the td. In my opinion, try to add this css

.fc-bg td {
height: 100%;
 }

and it will work.

Already trying on the pen, and it's working. CodePen

Flex height not working in Chrome

Add height: 100% to the parent of the orange div:

<div style="flex-grow: 1; background-color: red; height: 100%;"><!-- ADJUSTMENT HERE -->
      <div style="background-color: orange; height: 100%;">
             This div is inside flex item that grows to fill the remaining space.
             and has css height 100% but its not filling its parent.
             <br/>this div need to be filling its parent (the red div).
             this works on all other browsers. 
      </div>
</div>

Essentially, Chrome and Safari resolve percentage heights based on the value of the parent's height property. Firefox and IE11/Edge use the parent's computed flex height. For more details see bullet point #3 in this answer: https://stackoverflow.com/a/35051529/3597276

100% height when parent is flex item: Chrome bug?

It's because you are just using flex-grow:1 on the #middle div.

If you use the recommended shorthand of flex:1...it works perfectly.

#outer {  display: flex;  flex-direction: column;  background-color: white;  height: 300px;}#middle {  flex: 1;  /* here */  background-color: beige;}#inner {  background-color: black;  height: 100%;  color: white;}

<div id="outer">  <div id="middle">    <div id="inner">      x    </div>  </div></div>

How can I make my flexbox layout take 100% vertical space?

You should set height of html, body, .wrapper to 100% (in order to inherit full height) and then just set a flex value greater than 1 to .row3 and not on the others.

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

Flexbox Container in Chrome Doesn't Get 100% Height