4

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Seppo420
  • 2,041
  • 2
  • 18
  • 37

2 Answers2

6

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • I think this behavior is strange (but all browsers seems to do so). How come 100 % inside a "flex-grow" element does not become 100 % of its calculated size? – einord Nov 30 '16 at 08:45
  • 1
    @einord, the complete explanation is in the link references at the end of my answer. – Michael Benjamin Nov 30 '16 at 12:45
1

You have to give a height of 100% to the div.a, because the div.c and it's height of 100% take the height of it's parent. But when there isn't any height, it could not work with 100%...https://jsfiddle.net/h2yvoeL0/1/enter code here

Cheers.

webta.st.ic
  • 4,781
  • 6
  • 48
  • 98