IE11 CSS display inline-block overflowing inside flexbox - html

Question

I'm using an inline-block element with a large content inside a flex-box, and for some reason Internet Explorer 11 will not wrap the contents of this element, but push the flexbox out of the screen. It renders fine in Chrome and FireFox.
Example of my problem: https://codepen.io/anon/pen/YVboBX
<div class="page">
<main>
<radio-widget>
<layout-container>
<section class="icon">X</section>
<section class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in ipsum id lectus egestas scelerisque sit amet ut libero. Nam luctus turpis nisi, ut mollis libero sodales eu. Donec ante ante, venenatis non sodales sed, venenatis id lacus. In ante
risus, lobortis et ligula eget, commodo euismod risus. Ut sem orci, ultrices eu finibus vel, aliquam et quam. Nunc bibendum sodales libero et pulvinar. Cras porta feugiat lorem, vitae pretium augue fringilla et. Vestibulum dui lacus, ultrices
a ante et, euismod hendrerit ligula. Sed non urna ipsum. Fusce eget massa ex. Phasellus ac tempor ligula. Nullam sagittis dignissim ipsum, non commodo tellus luctus in. Etiam eget eleifend ex.
</section>
</layout-container>
</radio-widget>
</main>
<aside> a side</aside>
</div>
CSS
div.page {
display: flex;
flex-direction: row;
}
main {
flex-grow: 1;
flex-shrink: 1;
}
aside {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 5em;
}
radio-widget {
display: inline-block;
}
layout-container {
display: flex;
}
section.icon {
flex-shrink: 0;
flex-grow:0;
flex-basis: 5em;
}
section.content {
flex-shrink: 1;
flex-grow:1;
}
I already tried the following (possible) fix, but that does not solve my issue:
IE CSS display: inline-block Rendering issue

Answer 1

In IE11, flex elements must have some sort of width defined. Add this to your code:
main {
flex-grow: 1;
flex-shrink: 1;
width: 100%; /* NEW */
}
radio-widget {
display: inline-block;
max-width: 100%; /* NEW */
}
revised demo
References:
Why IE11 doesn't wrap the text in flexbox?
CSS wrap text not working in IE