Brent Traut Brent Traut - 1 month ago 9
CSS Question

Internet Explorer doesn't honor my min-height: 100% with flexbox

I've been looking through all the min-height: 100% solutions on StackOverflow and the web and I can't seem to find one that fits my (relatively simple) needs.

Here's what I want:

  1. I have a two column container, and both columns should stretch to be equal height.

  2. When the content doesn't fill the screen, the columns should stretch to the full window height.

  3. I'm happy to use flex-box, but I'd prefer not to use JS hacks if possible.

Example Code:

<!DOCTYPE html>
<div class="container">
<div class="nav">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<div class="content">
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
<p>Content 7</p>
<p>Content 8</p>

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

.wrapper {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;

.container {
display: flex;
align-items: stretch;
min-height: 100%;

.nav {
background: grey;
width: 200px;

.content {
flex-grow: 1;
background: yellow;

This works perfectly in Safari and Chrome.

It appears as if IE (v11 in my case) doesn't honor my min-height and thus, the columns don't fill the height of the screen. From what I read, IE6+7 had issues with treating height as min-height, but this is a relic of the past and long gone when using an HTML5 doctype.

How do I make IE honor my min-height?

How do I make this layout work?


Here is the fix:


  <main>Here comes the content ...</main>


body {
  display: flex;
  flex-direction: column;
  height: 100vh;
header, footer {
  flex-shrink: 0;
main {
  flex: 1 0 auto;