Question

我认为这是一个非常简单的布局，但在ie11中，布局包装似乎不起作用。查看此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包装这些项目而不删除包含行？

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>

一旦我尝试搜索没有涉及Angular Material的答案，解决方案在SO上也很容易找到。基本上，看起来您需要为指定了flex-wrap的容器的容器指定宽度（上例中的列）。您可以使用宽度：100％，或使用flex =＆＃34; 100＆＃34;在有角度的材料中，或者可能还有很多其他的小技巧，但无论如何，物品不包裹的原因是因为包含被包裹的孩子的元素将很乐意在ie11中的其包含元素之外。多么恶化。

布局包裹（角度材料）未包裹在ie11

1 个答案: