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

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:

  
Col 1
  
Col 2

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