Seppo420 Seppo420 - 5 months ago 15
CSS Question

height:100% not working inside flexbox with flex-grow

The blue box should be 100% height. It works when I set a pixel height for

div.a
, but unfortunately this is not an option for the real world case.

This probably explains everything:
http://codepen.io/anon/pen/jrVEpB



.a{
background-color:red;
display:flex;
}
.b1{
flex-grow:0;
background-color:green;
}
.b2{
flex-grow:1;
background-color:yellow;
height:100%;
}

.c{
height:100%;
background-color:blue;
}

<div class="a">
<div class="b1">
<p>hurr durr</p>
<p>hurr durr</p>
<p>hurr durr</p>
<p>hurr durr</p>
<p>hurr durr</p>
<p>hurr durr</p>

</div>
<div class="b2">
<div class="c">
miksi et ole full height saatana
</div>
</div>
</div>




Answer

You don't need percentage heights to achieve this layout. It can be built with flex properties alone:

.a {
  display: flex; 
  background-color: red;
}
.b1 {
  background-color: green;
}
.b2 {
  flex: 1;
  display: flex;
  background-color: yellow;
}
.c {
  flex: 1;
  background-color: blue;
}

body { margin: 0; }
<div class="a">
  <div class="b1">
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
  </div>
  <div class="b2">
    <div class="c">
      miksi et ole full height saatana
    </div>
  </div>
</div>

If using percentage heights is a must, then consider the proper implementation: