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

Answer 1

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