Flexbox body and main min-height

Question

I'm trying to have the body to expand but the min-height does not work. I've read other related topics but can't get my head around it.

CSS and html

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

body {
  display: flex;
  background: #eee;
  flex-direction: column;
}

.menu {
  background: red;
  color: #fff;
  padding: 10px;
}

.wrap {
  display: flex;
}

.sidebar {
  background: #ddd;
  width: 300px;
}

.main {
  background: #ccc;
  flex: 1;
}

.footer {
  background: #000;
  color: #fff;
  padding: 10px;
}

<div class="menu">Menu</div>

<div class="wrap">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
</div>

<div class="footer">Footer</div>

Expected result is that main is streched to fill the height if it's less than 100%.

looks very much alike : http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486 — G-Cyrillus, May 25 '16 at 08:31

score 15 · Accepted Answer · answered May 25 '16 at 08:26

15

Use flex: 1 on the centered element:

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

.Site-content {
  flex: 1;
  background-color:#bbb;
}

<body class="Site">
  <header>This is the header text ☺</header>
  <main class="Site-content">…</main>
  <footer>This is the footer text ☻</footer>
</body>

answered May 25 '16 at 08:26

Randy

9,419
5
39
56

1

Thanks! A combination with setting flex: 1 on .wrap (in my case) and having width: 100% on html (instead of min-height) did the trick! – Jens Törnell May 25 '16 at 08:30

score 7 · Answer 2 · answered Sep 28 '19 at 10:31

To get min-height with relative units working even in IE11 it needs just a tiny trick.

The nature of min-height is to overwrite the height when height is smaller then min-height. Very clear! But the pitfall is when min-height has a realitve unit (% or vh) and height is not set. Since it is relative it has no basis to relay on.

For all major browsers except Internet Explorer one possibility is to change the unit from % to vh:

body {
  min-height: 100vh;
}

For Internet Explorer it needs a height (will be overwritten from min-height):

body {
  height: 1px;
  min-height: 100vh;
}

or to keep % the rules has to be applied to html too:

html, body {
  height: 1px;
  min-height: 100%;
}

A cross browser solution for the OP needs height: 1px on body and of course flex-grow: 1 for .wrap to let it grow faster then menu and footer:

body,
html {
  padding: 0;
  margin: 0;
  height: 1px; /* added */
  min-height: 100%;
}

body {
  display: flex;
  background: #eee;
  flex-direction: column;
}

.menu {
  background: red;
  color: #fff;
  padding: 10px;
}

.wrap {
  display: flex;
  flex-grow: 1; /* added */
}

.sidebar {
  background: #ddd;
  width: 300px;
}

.main {
  background: #ccc;
  flex: 1;
}

.footer {
  background: #000;
  color: #fff;
  padding: 10px;
}

<div class="menu">Menu</div>

<div class="wrap">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
</div>

<div class="footer">Footer</div>

The problem with `height: 1px` is that you lose the autoscaling functionality with content. So in real life the `min-height` can just as well be made `height`. Losing the autoscaling means the content will never make the element grow beyond the `min-height`, and thus rendering the property useless. — Guido Bouman, Apr 10 '20 at 06:46
@GuidoBouman @kmgt I just had this problem, and setting `height` to `fit-content` instead of `1px` worked for me. It gave `height` a value that `min-height` could override, but kept the auto-scaling functionality you'd lose otherwise. — Jaden Baptista, Jul 07 '20 at 12:15
You'll guess it! IE don't like `fit-content`. [caniuse/fit-content](https://caniuse.com/#search=fit-content) — tom, Jul 07 '20 at 13:12

Flexbox body and main min-height

2 Answers2