Bootstrap 4 flex-fill not filling height

Question

I want to have a header div on the top (which i can fill with other crap), and a footer div on the bottom. In the middle there should be a div with variable height to fill the whole screen.

Here is my code:

<div class="container-fluid p-0" style="background-color:brown">
  <div class="flex flex-column">
    <div class="flex" style="background-color:aqua">Header</div>
    <div class="flex flex-fill" style="background-color:yellow">This should be variable in height</div>
    <div class="flex" style="background-color:aqua">Footer</div>
  </div>
</div>

If you execute this, you will see that the yellow line is never filled and it has the same height as both the header and the footer. You can also see that the whole website has a brown background.

Can you help me with that?

there is no `flex` class in bootstrap. it should be `d-flex` — Temani Afif, Jul 31 '19 at 11:10
Why did you tag it as duplicate if the linked questions are different? — Loading, Jul 31 '19 at 11:11

score 3 · Accepted Answer · answered Jul 31 '19 at 11:09

The parent container needs to have a defined height. For example, use min-vh-100 to make it viewport height...

https://www.codeply.com/go/pr2crCfas2

<div class="container-fluid p-0" style="background-color:brown">
    <div class="d-flex flex-column min-vh-100">
        <div class="d-flex" style="background-color:aqua">Header</div>
        <div class="d-flex flex-fill" style="background-color:yellow">This should be variable in height</div>
        <div class="d-flex" style="background-color:aqua">Footer</div>
    </div>
</div>

Also note the class for display:flex is d-flex

Thank you, just using d-flex fixed the issue – Loading Jul 31 '19 at 11:17 — Loading, Jul 31 '19 at 11:17

Bootstrap 4 flex-fill not filling height

1 Answers1