布局换行(角度材质)在 IE11 中未换行

Question

我认为这是一个非常简单的布局，但在 ie11 中，布局换行似乎不起作用。查看此代码笔，或者只考虑以下代码：

<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 和 edge 将按预期换行，但 ie11 不会。如果删除最外层的容器(行(，则 ie11 将按预期工作。为什么这个容器会有所作为？有人知道我如何强迫 ie11 包装这些项目而不删除该包含行吗？

Answer 1

因此，经过更多的挖掘和实验，很明显这与角度材料完全无关，只是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上也很容易找到解决方案。基本上，看起来您需要为指定了 flex-wrap 的容器的容器指定宽度(上面示例中的列(。你可以用 width：100% 或角度材质中的 flex="100" 来做到这一点，或者可能还有很多其他的小技巧，但无论如何，这些项目不换行的原因是因为包含被换行的子元素会很乐意在 ie11 中超出其包含元素。多么加重。