How to set flex column child to go full available height?

Question

Consider the following code:

.container {
  display: flex;
  flex-direction: column;
}

.header {
  flex: 1;
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  height: 100%;
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

Why is my CONTENT not getting full available height (from HEADER bottom to the bottom of page) ? How to solve it ?

The `height: 100%` you are setting takes into account the total height of the parent, which is `.container`, but `.container` only has a height based on its content; try setting `height: 100vh`; in the `.container` class... also, due to the `flex: 1` property in your items, they will expand to use equal amount of space — IvanS95, Apr 18 '19 at 20:46
Same issue, the body of the document only uses the total amount of space its children add up; so unless you explicitly state the height it needs (100% of the viewport's height = `100vh`), percentages are calculated based on the parent's dimensions iirc... You can see this by inspecting the element, the `html` element only uses enough space to contain the children — IvanS95, Apr 18 '19 at 20:54

G-Cyrillus · Accepted Answer · 2019-04-18T21:10:32.067

Your container is missing an height , you can use height:100vh; to fill window's height.

You can also use % , but you need to inherit a valid value from a parent. In this case, it can be take from html, send to body, and finally used by your container:(example in this duplicate)

html,body,.container {height:100%;}

example with vh

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  /*or min-height*/      height: 100vh;
}

.header {
  /* flex: 1; not needed */
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  /*height: 100%; not needed */
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

IvanS95 · Answer 2 · 2019-04-18T23:25:17.480

I'm putting this answer to clear up a few things mentioned in the comments, if it's not appropiate due to the question already having an answer I'll delete this.

By making the changes I proposed, we set the .container's height to 100vh, to explicitly define that it must have the full viewport's height, without this, the .container only has the needed height to contain the elements inside of it.

This applies the same to the body and html elements.

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 1;
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

Using percentages to define a height or width require some reference to calculate how much space that % unit is; so for example:

If we set a width of 1000px for .container, we can set its children's width to say, 50% and 100% and they will resize accordingly to 500px and 1000px because they have the 1000px reference from their parent.

EDIT: As noted by @Temani, this reference is always present for the width property, so using percentages for width will never fail, even if we don't specify an explicit width in a parent container.

.container {
  display: flex;
  flex-direction: column;
  width: 1000px;
}

.header {
  flex: 1;
  width: 50%;
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  width: 100%
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

The same happens with the height property; we define a specific height for the parent, and the children's height can be set with percentages since now they have a reference.

.container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.header {
  height: 20%;
  background-color: red;
}

.content {
  background-color: blue;
  height: 80%
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

note that height and width don't behave exactly the same with percentage. Both need a reference (this is clear) but the reference for the width is always there while it's not the case for height. Basically percentage width will likely never fail. — Temani Afif, Apr 18 '19 at 23:22
Thank you for the heads up! Will add it to the answer just in case — IvanS95, Apr 18 '19 at 23:23

score 0 · Answer 3 · answered Apr 18 '19 at 21:07

Its going to depend on what you want to ultimately do the page and how you are going to use the page.

You can set your .container full page width & height:

.container {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

and then grow/shrink your containers as needed:

.header{ flex: 1 }
.content { flex: 2 } // twice as large as header

score 0 · Answer 4 · answered Apr 18 '19 at 21:14

How @ivanS95 says '.container only has a height based on its content'. Instead, you can do this by setting all parents (html, body) elements to 100% also the .container at 100% too, and changing your flex propierty of .header not allowing it to grow.

Example here:

flex: 0 1;

https://codepen.io/pen/

This question was very nicely answered before by @Pebbl at:

Make a div fill the height of the remaining screen space

please check it.

How to set flex column child to go full available height?

4 Answers4

Linked