IE11 CSS在flexbox内部显示内联块溢出

Question

我在弹性框中使用了一个内容大的内联块元素,由于某种原因,Internet Explorer 11不会包装此元素的内容,而是将flexbox推出屏幕.它在Chrome和FireFox中呈现得很好.

我的问题示例: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;
}

我已经尝试了以下(可能的)修复,但这并没有解决我的问题: IE CSS显示:内联块渲染问题

Answer 1

在IE11中,flex元素必须定义某种宽度.将其添加到您的代码中:

main {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;              /* NEW */
}

radio-widget {
  display: inline-block;
  max-width: 100%;          /* NEW */
}

修订演示

参考文献:

• 为什么IE11不在flexbox中包装文本？
• CSS包装文本在IE中不起作用