Html IE11 CSS显示flexbox内部溢出的内联块

我使用的是一个内联块元素，在flexbox中包含大量内容，出于某种原因，InternetExplorer11不会包装该元素的内容，而是将flexbox推出屏幕。它在Chrome和FireFox中呈现良好

我的问题的例子：

我已经尝试了以下（可能的）修复，但这并不能解决我的问题：

---

在IE11中，flex元素必须定义某种宽度。将此添加到您的代码中：

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

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

参考资料：

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;
}

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

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