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

Question

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?

It's not that IE is not honouring min-height, it's not honouring the requirement that for a single line flex container, the height of that line should be the height of the flex container. That said, I've no idea whether anything can be done about it. — Alohci, Oct 27 '14 at 22:03
Program Manager on the IE team here; this may be related to a couple flexbox issues we have been working to resolve. I just tested your page on an internal build and could not repro the results seen in IE11. Hang tight - we'll be shipping a fix in a future release. Get ahead of the pack by [downloading Windows 10](https://insider.windows.com/). — Sampson, Oct 27 '14 at 23:19
My issue is almost certainly a duplicate of http://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie. — Brent Traut, Nov 03 '14 at 02:29
I had the same issue and I fixed setting a height instead a min-height and I change it with media queries — Iran Reyes, Dec 26 '14 at 03:53

Thomas · Accepted Answer · 2015-02-16T09:28:45.677

21

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/

edited Feb 16 '15 at 09:28

answered Feb 11 '15 at 14:26

Thomas

2,338
2
23
32

9

height: 100% and height: 100vh work exactly the same in this case. They both work fine until your content overflows the screen height. What I really need in this case is min-height: 100% or 100vh, but IE has a bug with flexbox not honoring min-height. – Brent Traut Feb 16 '15 at 06:57
Have you tried the code? I added a fiddle to prove that this is working in IE, even with overflowing content. You need to set the height to 100vh, not %. – Thomas Feb 16 '15 at 09:31
Well, you didn't answer the concern of of min-height being broken which is why I dismissed your answer, but after taking another shot I realized that you've found a workaround that doesn't depend on min-height. Fantastic! Here's the version of my codepen using your fix: http://codepen.io/anon/pen/EaEejw?editors=110 – Brent Traut Feb 19 '15 at 22:01

score 5 · Answer 2 · answered Aug 10 '15 at 08:44

5

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

answered Aug 10 '15 at 08:44

Xopoc

254
2
5

1

`float: left` is required yes. `overflow` and `visibility` is not needed. – Glenn Jorde Jan 25 '17 at 13:28

BeliG · Answer 3 · 2016-09-03T08:18:57.897

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.

score 1 · Answer 4 · answered Jun 30 '17 at 12:52

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 */
}

Brent Traut · Answer 5 · 2015-02-19T22:09:38.340

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.

score -2 · Answer 6 · answered Oct 27 '14 at 21:50

-2

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

answered Oct 27 '14 at 21:50

Manjunath Siddappa

2,126
2
21
40

Right, so this is on the right track and I tried this. There's a problem though. When you resize your browser window such that the content no longer fits, and then you scroll down, you can see that the content has overflowed the containers. This happens on both IE and Chrome. – Brent Traut Oct 27 '14 at 23:14
Perhaps I'll need to use JS on IE to check if the container is shorter than the window and set it to height: 100% only in that case. – Brent Traut Oct 27 '14 at 23:34
This doesn't fix it. `height` is also read by other browsers and it renders `min-height` useless. See that [your demo overflows](http://i.imgur.com/TKNewi5.png) if the content is taller than 100% – fregante Feb 16 '15 at 12:16

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

6 Answers6

Two columns layout

Sticky footer

Linked