CODEWITHSUNDEEP
htmlcssflexbox
Seppo420
Seppo420

Reputation: 2251

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>

Upvotes: 5

Views: 3766

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371391

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:

Upvotes: 7

webta.st.ic
webta.st.ic

Reputation: 5169

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.

Upvotes: 1

Related Questions