How to make div fill remaining vertical space using Flexbox?

Question

I would like to have 3 elements (a header, a footer, and some content) stacked vertically in the page. The header and footer div have a fixed height. How can I make the content div (the one in the middle) take up the remaining vertical space?

My attempt with Flexbox

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  background-color: red;
  height: 100px;
}

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

.footer {
  background-color: green;
  height: 30px;
}

<div class="wrapper">
  <div class="header" />
    <div class="content" />
    <div class="footer" />
</div>

`flex-grow` sounds like it's what you're looking for, but then the size of `.content` won't be affected by how much stuff it contains, which could cause problems - unless it's guaranteed to be less than `100vh - 60px` tall — CertainPerformance, Aug 21 '20 at 20:30
@SoftwareStudent123 your divs does not have closing fix that first — Nutan Panta, Aug 21 '20 at 20:32

score 2 · Answer 1 · answered Aug 21 '20 at 20:37

2

Your css is already doing what you want to achieve.

flex: 1 is shorthand for flex-grow: 1

As other items have fixed height, flex: 1 causes your content to fill remaining space in your flexbox. The issue is however that your flexbox container doesn't have a height, if you want to cover the whole page you should add height: 100vh to your container.

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

answered Aug 21 '20 at 20:37

Berk Kurkcuoglu

1,453
1
9
11

Also div is not a self closing element you need to close them as @Nutan Panta mentioned. – Berk Kurkcuoglu Aug 21 '20 at 20:38
I would just add calc(100vh - {the body padding - 16px}) – Moshe Sommers Aug 21 '20 at 20:38
I never thought it could be done like this I usually don't do anything because after a certain space is taken by the content part the footer automatically comes to the bottom. – Nutan Panta Aug 21 '20 at 20:42
@MosheSommers well if we consider the body, best case would be resetting the default body margin and setting the height of the body as 100vh, then giving the wrapper div height: 100%. – Berk Kurkcuoglu Aug 21 '20 at 20:42
@BerkKurkcuoglu With you on that – Moshe Sommers Aug 21 '20 at 20:43

score -2 · Answer 2 · answered Aug 21 '20 at 20:38

The footer does not need to at the bottom at the beginning after a certain space is taken by the content it will automatically will come at the bottom.

.wrapper {
  width: 100%;
}

.header {
  background-color: red;
  height: 100px;
}

.content {
  background-color: blue;
  height:200px;
}

.footer {
  background-color: green;
  height: 30px;
}

<div class="wrapper">
  <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

How to make div fill remaining vertical space using Flexbox?

2 Answers2