布局包装（角度材料）不包装在 ie11答案

【问题标题】：layout-wrap (angular material) not wrapping in ie11布局包装（角度材料）不包装在 ie11
【发布时间】：2017-05-19 06:25:51
【问题描述】：

我有一个我认为非常简单的布局，但在 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 和 edge 将按预期换行，但 ie11 不会。如果您删除最外面的容器（行），那么 ie11 将按预期工作。为什么那个容器会有所作为？任何人都知道如何强制 ie11 在不删除包含行的情况下包装这些项目？

【问题讨论】：

标签： angular-material internet-explorer-11

【解决方案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>

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

【讨论】：