How to make the children of a flex item fill 100% of their parents height?

Question

I have a simple page with a header (which needs to take up 20% of the total page height) and container which I want to fill the remaining page height (80%).

The catch is that I want each child of the container to be 100% of the container height (so the container would need to expand to actually be 80% of the total page height * how ever many children there are.

Is it possible using Flexbox to make the container hold several elements each of which are the total height of the container?

I do not know how make an element both fill remaining space, and then use that as an indicator of total height.

Anyway, here is a codepen demo - the simple html and css follows: My ideal result would be that each of the colored divs would be the full height of the body minus the header height and the container would expand to hold the items.

Any ideas would be very appreciated.

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
header {
  background: blue;
  flex: 1;
}
div.holder {
  flex: 5;
  display: flex;
  flex-direction: column;
}

div.one {
  flex: 1;
  background: green;
}

div.two {
  flex: 1;
  background: yellow;
}

div.three {
  flex: 1;
  background: red;
}

div.four {
  flex: 1;
  background: orange;
}

<body>
  <header>  
  </header>
  <div class="holder">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="three">
      three
    </div>
     <div class="four">
      four
    </div>
  </div>
</body>

http://stackoverflow.com/q/33636796/3597276 – Michael Benjamin Feb 27 '17 at 12:44 — Michael Benjamin, Feb 27 '17 at 12:44

pol · Answer 1 · 2017-02-27T02:02:04.003

Do you really need flexbox?
Why not simply use viewport values (vw,vh)?

html, body {
  margin: 0;
}
header {
  background: blue;
  height: 20vh;
}
div.holder {
  height: 80vh;
}

div.one {
  background: green;
  height: 100%;
}

div.two {
  background: yellow;
  height: 100%;
}

div.three {
  background: red;
  height: 100%;
}

div.four {
  background: orange;
  height: 100%;
}

<body>
  <header>  
  </header>
  <div class="holder">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="three">
      three
    </div>
     <div class="four">
      four
    </div>
  </div>
</body>

Or you can go with percentage values, it's pretty much the same. (but body and html need to have 100% height)

html, body { height: 100%; }
header { height: 20%; }
.holder { height: 80%; }
.holder > div { height: 100%; }

score 1 · Accepted Answer · answered Feb 27 '17 at 02:32

DEMO

css

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

header {
  background: blue;
  height:20%
}

div.holder {
  height:80%; /* <------ make it of desired height */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

div.holder > div {
  min-height: 100%; /* <------ better to provide min-height */
}

div.one {
  flex: 1;
  background: green;
}

div.two {
  flex: 1;
  background: yellow;
}

div.three {
  flex: 1;
  background: red;
}

div.four {
  flex: 1;
  background: orange;
}

html

<body>
  <header></header>
  <div class="holder">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>

How to make the children of a flex item fill 100% of their parents height?

2 Answers2