layout-wrap (angular material) 在 ie11 中不换行

Question

我有一个我认为非常简单的布局，但在 ie11 中，layout-wrap 似乎不起作用。看看这个 codepen，或者只考虑以下代码：

<div layout="row">
    <div layout="column">
        <div layout="row" layout-wrap>
            <div>lorem ipsum dolor sit amet</div>
            <div>lorem ipsum dolor sit amet</div>
            <div>lorem ipsum dolor sit amet</div>
            <div>lorem ipsum dolor sit amet</div>
        </div>
    </div>
</div>

有了 html，chrome 和边缘将按预期换行，但 ie11 不会。如果您删除最外层的容器（行），则 ie11 将按预期工作。为什么那个容器会有所作为？任何人都知道如何强制 ie11 包装这些项目而不删除包含行的项目？

Answer 1

所以，经过更多的挖掘和试验，很明显这与 angular material 完全无关，只是 IE11 中的奇怪行为。我能够用普通 css 清楚地重现该问题。在此处查看此 CodePen，或考虑此 html:

<div style="display: flex;flex-direction: row;">
  <div style="display: flex;flex-direction: column;">
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
    </div>
  </div>
</div>

在 SO 上也很容易找到解决方案，一旦我尝试搜索不涉及 Angular Material 的答案。基本上，看起来您需要为指定了 flex-wrap 的容器（上例中的列）的容器指定宽度。您可以使用 width:100%，或在 angular material 中使用 flex="100"，或者可能还有很多其他小技巧，但无论如何，项目不换行的原因是因为元素在 ie11 中，包含被包装子元素的元素将很高兴地超出其包含元素。真烦人。

layout-wrap (angular material) 在 ie11 中不换行

layout-wrap (angular material) not wrapping in ie11

internet-explorer-11

angular-material