Flexbox fill available space vertically

Question

Now in a flexbox row I can write

<div layout="row">
  <div>some content</div>
  <div flex></div> <!-- fills/grows available space -->
  <div>another content</div>
</div>

I would like to achieve the same but vertically, like on this picture Currently the problem is that the div which would need to grow doesn't have any height so the two contents are below each other. I want my second content to be at the bottom of the parent container which has a fixed height!

I know I could solve this by positioning the second content absolute and bottom: 0; but can I achieve this with flexbox?

score 71 · Accepted Answer · answered Oct 13 '16 at 12:31

71

So you can try this:

flex-direction: column for the flex container.
flex: 1 for the element that needs to fill the remaining space.

See demo below where the flexbox spans the viewport height:

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

Cheers!

answered Oct 13 '16 at 12:31

kukkuz

41,512
6
59
95

Lovely! Thank you so much. This was killing me since the last hour. – Naser Mohd Baig Jun 09 '22 at 13:14
Thank you, i was not adding height to the parent – Cuado Jun 15 '22 at 11:45

score 21 · Answer 2 · answered Oct 13 '16 at 12:31

You just need to use flex-direction: column on parent and flex: 1 on middle div.

body,
html {
  padding: 0;
  margin: 0;
}
.row {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.row > div:not(.flex) {
  background: #676EE0;
}
.flex {
  flex: 1;
  background: #67E079;
}

<div class="row">
  <div>some content</div>
  <div class="flex"></div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

Flexbox fill available space vertically

2 Answers2

Linked

Related