'Flex-direction: column' in IE11 interacts badly with 'display: table'

[SarahTheCoder]

Here's the [codepen](https://codepen.io/anon/pen/Krxvry) test case. The workaround is included, but commented out. This is boiled down from an actual case I had with a complex layout.

Expected behavior: All the divs should be at 100% width, no matter what size your browser window is at. This happens in Chrome.

Actual behavior in IE11: The red div renders at an enormous width, which the Developer Tools shows to be -184070.03px (note the negative sign). You will see a horizontal scroll bar.

I don't believe MS is accepting bug reports for IE11 since they are pushing for Edge acceptance (?), but many of us still are required to make our apps work in them, so I wanted to make this bugfix available to the community.