Internet Explorer Doesn't Honor My Min-Height: 100% with Flexbox

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

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/

flex container min-height ignored in IE

IE 10 & 11 have a number of issues with rendering flexbox properly.

Here's one: A flex container doesn't respect the min-height property in these browsers.

A simple solution is to make your flex container also a flex item.

Just add this to your code (no other changes necessary):

body {
   display: flex;
   flex-direction: column;
}

revised fiddle

More info: https://github.com/philipwalton/flexbugs#flexbug-3

IE Flexbox - Child Element does not stretch when using min-height on parent

To fix that, I needed to wrap the min-height element in another flexbox row.

http://s.codepen.io/boomerang/cf5b323f92549ea4b9e9aa3afcee9fc41427899803437/index.html#https://github.com/philipwalton/flexbugs#3-min-height-on-a-column-flex-container-wont-apply-to-its-flex-items

Not beautiful because I have to add another element just for "styling", however it works.

display: flex not working on Internet Explorer

Internet Explorer doesn't fully support Flexbox due to:

Partial support is due to large amount of bugs present (see known
issues).

Sample Image
_{Screenshot and infos taken from caniuse.com}

Notes

Internet Explorer before 10 doesn't support Flexbox, while IE 11 only supports the 2012 syntax.

Known issues

IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation.
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
IE 11 does not vertically align items correctly when min-height is used. See bug.

Workarounds

Flexbugs is a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.

Minimum content sizing of flex items not honored
Column flex items set to align-items: center overflow their container
min-height on a flex container won't apply to its flex items
flex shorthand declarations with unitless flex-basis values are ignored
Column flex items don't always preserve intrinsic aspect ratios
The default flex value has changed
flex-basis doesn't account for box-sizing: border-box
flex-basis doesn't support calc()
Some HTML elements can't be flex containers
align-items: baseline doesn't work with nested flex containers
Min and max size declarations are ignored when wrapping flex items
Inline elements are not treated as flex-items
Importance is ignored on flex-basis when using flex shorthand
Shrink-to-fit containers with flex-flow: column wrap do not contain their items
Column flex items ignore margin: auto on the cross axis
flex-basis cannot be animated
Flex items are not correctly justified when max-width is used

Nested flexboxes: IE11 doesn't respect max-width: 100%

Ok, I found a way to prevent this in IE11: max-width: calc( 100% - 0.1px );. Therefore the max-width gets calculated and interpreted in pixel and not in percent, but is nearly 100%. So visually everything looks as expected.

Does anyone know a better solution or an explanation for this problem?

Min height not working properly?

You also need to give the html and body a height

html, body {
  height: 100%;
}

Update 1, after a question edit

With that new markup, also .page need height: 100%

html,body {  height: 100%;}
.page {  height: 100%;  border: 1px solid black;}
.child {  min-height: 100%;  border: 1px solid red;  display: flex;}

<div class="page">  <div class="child">    With firefox / IE, this CHILD div is not stretching to take 100% of the container.  </div></div>

While will a div with min-height: 100% not expand when it's content grows to large

Switch the percentage values to vh based values,

Here is a working demo

This is because percentage values are relative to parent container, and what you are trying to achieve is relative to viewport size (you can simply replace the height: 100% of the html, body attributes by a min-height: 100%, but the canevas won't take 100% of the page if the red box is small, it will just adapt to it.

Flexbox not filling height in IE11

This a known IE bug that unfortunately has been closed as Won't Fix by IE Team and described as follows:

In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

AFAIK and despite this description, the bug also applies when flex-direction is row. As mentioned in the comments Philip Walton has proposed a solution here, which includes setting height to a fixed value, but this is not an option for OP.

As a workaround I propose to set a min-height: 100vh to the main element too:

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  min-height: 100vh;
}

Pen here.

Internet Explorer Doesn't Honor My Min-Height: 100% with Flexbox