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

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.