AustinC AustinC - 1 month ago 9
HTML Question

Controlling height expansion in a row flex box

I am very confused about flex boxes. Here's the layout I have right now:

enter image description here

And the code:

<html>
<head>
<style>
/* flex boxes */
.interblock{background:gray;height:100%;display:flex;flex-flow:row wrap;}
.subrect{flex:1 90%;}
.labelrect{flex:0 1 10%;}
.footrect{flex:1 100%;background:yellow;height:auto;}
.topleft{flex:0 1 50%;height:auto;background:green;}
.topright{flex:0 1 50%;height:auto;background:red;}
</style>
</head>

<body>
<div class='interblock'>
<div class='topleft'>
topleft
</div>
<div class='topright'>
topright
</div>
<div class='labelrect' style='background:coral'>labelrect</div>
<div class='subrect' style="background:orange">subrect</div>
<div class='labelrect' style='background:cyan'>labelrect</div>
<div class='subrect' style="background:blue">subrect</div>
<div class='footrect'>
footer
</div>
</div>
</body>
</html>


This layout is almost correct. The problem is that I want the center block of subrects/labelrects to use 100% of the height that is not being used by the header and footer. There could be an arbitrary number of subrects/labelrects and they should all have the same height. I'm not sure how to specify an expanding height that takes into account the content of the header and footer. How can I get the labelrect/subrect block to be height 100% - header - footer?

Answer

You need to alter your markup some. Here I created 2 wrappers, 1 for your top and 1 for the middle.

Giving the top and footrect flex: 0 make them size by content and middle having flex: 1 to fill the rest of the space.

/* flex boxes */

html,
body {
  margin: 0;
}
.interblock {
  background: gray;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top,
.footrect {
  flex: 0;
}
.top {
  flex-basis: auto;
  display: flex;
}
.middle {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.subrect {
  flex: 1 90%;
}
.labelrect {
  flex: 0 1 10%;
}
.footrect {
  background: yellow;
}
.topleft {
  flex: 1;
  background: green;
}
.topright {
  flex: 1;
  background: red;
}
<div class='interblock'>
  <div class='top'>
    <div class='topleft'>
      topleft<br><br>
    </div>
    <div class='topright'>
      topright
    </div>
  </div>
  <div class='middle'>
    <div class='labelrect' style='background:coral'>labelrect</div>
    <div class='subrect' style="background:orange">subrect</div>
    <div class='labelrect' style='background:cyan'>labelrect</div>
    <div class='subrect' style="background:blue">subrect</div>
  </div>
  <div class='footrect'>
    footer<br><br>
  </div>
</div>