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:

I have a two column container, and both columns should stretch to be equal height.
When the content doesn't fill the screen, the columns should stretch to the full window height.
I'm happy to use flex-box, but I'd prefer not to use JS hacks if possible.

Example Code:

http://codepen.io/anon/pen/dwgDq?editors=110

<!DOCTYPE html>
<html>
  <body>
    <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>
      <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>
      </div>
    </div>
  </body>
</html>

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:

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

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

jsfiddle: http://jsfiddle.net/d5syw3dc/

There is another solution for this problem.

In your case you can use pseudo element to stretch row:

First of all use 100vh instead of 100%

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

After that just add pseudo element to .container with exactly same height value

.container::after{
  content: '';
  height: 100vh;
  visibility: hidden;
}

Here, see my codepen http://codepen.io/anon/pen/LVazgQ

min-height is not working in IE10/11 when it's associated with a flex layout (check the bug report). Use another flex container to fix it.

Edit: Just figured out I wasn't answering the original post, misled by the upvoted answer. So here we go:

Two columns layout

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
</div>

CSS

.ie-fixMinHeight{
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
}

#content {
    flex-grow:1;
}

Don't use flexbox layout directly on body cause it screwed up elements inserted via jQuery plugins (autocomplete, popup, etc.).

Here the fixed layout based on your code.

Sticky footer

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

See a working demo.

Having the children of your display: flex element inherit the min-height was a quick solution for me on IE, without adding any extra elements. It also works as expected with overflow.

HTML:

<div class="container">
  <div class="col-1">Col 1</div>
  <div class="col-2">Col 2</div>
</div>

CSS:

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  min-height: inherit; /* or 100vh or whatever you want */
  display: flex;
}
.container > * {
  min-height: inherit; /* use the full height of the container, works with overflow */
}

.col-1 {
  background: red;
  flex-grow: 1; /* half the screen width */
}
.col-2 {
  background: blue;
  flex-grow: 1; /* half the screen width */
}

EDIT: Thomas's answer shows a way to achieve what I wanted without using min-height, which means it works fine on IE.

I ended up solving this issue with Javascript, although I admit it's absolutely nasty code and a pretty implementation-dependant solution. Whenever my main content element changes in size, I turn off the height property, measure the container to decide if the height property is actually necessary, and then replace it if needed. It's as if I wrote my own implementation of min-height. A major downside of this approach is that IE doesn't give proper events when elements change size or when content changes within an element, and without these events, you need to use a setInterval timer and measure the element yourself. Gross.

In addition to my own solution, I spoke with the folks on the IE team who work on flexbox. They acknowledged that the bug still exists in production today, but still urged me to find a way to fix it without JS. The one lead they gave me was to use the IE-specific -ms-grid layout. I'm unfamiliar with these, but I'll report back and update this answer if I have time to investigate.

USE height: 100% for IE

IE will ignore min-height property here, but chrome will pick it.

i am not sure about the reason but i hope it works fine.

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

Codepen

http://codepen.io/anon/pen/KDJjC

来源：https://stackoverflow.com/questions/26596813/internet-explorer-doesnt-honor-my-min-height-100-with-flexbox

标签

html

css

html5

internet-explorer

height