it-swarm.com.de

Durch die Flex-Richtungsspalte überlappen sich Flex-Elemente mit IE11

Ich habe ein Problem mit der Flexbox in IE11. Bei Verwendung von flex-direction: column überlappen sich die Flex-Items:

 enter image description here

In anderen Browsern (Chrome, Safari) sieht es so aus:

 enter image description here

Dies ist die CSS:

.container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 0%;
}

Und das ist das HTML:

<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

Ich habe ein Codepen gemacht, um das Problem zu demonstrieren:

http://codepen.io/csteur/pen/XMgpad

Was fehlt mir, um dieses Layout in IE11 nicht zu überlappen?

10
Chantal Steur

Es wird von% 0 in der Klasse verursacht

.flex {
  flex: 1 1 auto;
}

ändere es auf auto, dann sollte es kein Problem sein

20
necilAlbayrak

Anstelle von flex: 1 1 0%; verwenden Sie flex: 1 1 auto;

.container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 auto;
}
<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

13
3rdthemagical

hatte ein ähnliches Problem mit IE11 und flex-direction: column-reverse Ich änderte die Verwendung der Eigenschaft css order anstelle von flex-direction.

1
Adam

Meine besondere Lösung für dieses Problem bestand darin, dass ich die Breite des übergeordneten Elements explizit festlegen musste. Da flex auf column gesetzt ist, erweitert IE11 automatisch die Breite des Containers, um den Inhalt der untergeordneten Elemente zu berücksichtigen (denken Sie daran, dass die Flexboxen in column-Ausrichtung auf ihren Seiten umgedreht sind, sodass sie bei Überlauf horizontal und nicht vertikal wachsen).

Mein Code würde also so aussehen:

.container {
  display: flex; 
  flex-direction: column;
  width: 100%; // needs explicit width
}

.flex {
  flex: 1 1 auto; // or whatever
}
0
kgrote