Layout-Wrap (eckiges Material) nicht in ie11

Question

Ich habe, was ich dachte, war ein ziemlich einfaches Layout, aber in ie11, Layout-Wrap scheint nicht zu arbeiten. Sehen Sie sich diese codepen, oder man denke nur an den folgenden Code:

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

Mit diesem html, Chrom und Kante wird wickeln wie erwartet, aber IE11 nicht. Wenn Sie den äußersten Container (die Zeile) entfernen, funktioniert ie11 wie erwartet. Warum sollte dieser Container einen Unterschied machen? Hat jemand eine Idee, wie ich ie11 dazu bringen kann, diese Elemente zu verpacken, ohne die Zeile zu entfernen?

Answer 1

So, nach einem Graben und Experimentieren, wurde klar, dass dies nichts mit Winkeln Material überhaupt zu tun hat, und ist nur seltsames Verhalten in IE11. Ich konnte das Problem mit einfachen CSS deutlich reproduzieren. Sehen Sie sich diese CodePen hier, oder betrachten Sie diesen 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> 

Die Lösung war ziemlich einfach hier auf SO als auch zu finden, sobald ich Suche nach einer Antwort versucht, die nicht scharfkantiges Material hat einzubeziehen. Im Grunde scheint es so, als ob Sie eine Breite für den Container des Containers angeben müssen, für den Flex-Wrap angegeben wurde (die Spalte im obigen Beispiel). Du kannst dies mit width: 100% tun, oder mit einem flex = "100" in eckigem Material, oder wahrscheinlich vielen anderen kleinen Tricks, aber der Grund, warum die Elemente nicht umbrechen, ist das Element, das die umschlossenen Kinder enthält wird gerade glücklich außerhalb seines enthaltenden Elements in ie11 gehen. Wie erschwerend.