Flex-Elemente sind größer als erwartet
Das Hinzufügen von Padding zu Flex-Elementen kann in einigen IE-Versionen zu einem deutlichen Fehler führen.
Elemente sind größer als erwartet - das letzte Element befindet sich in einer neuen Zeile. Das Problem tritt nur im Internet Explorer auf und kann durch Hinzufügen einer maximalen Breite oder durch Hinzufügen von flex-basis: auto; zu den Flex-Elementen behoben werden.
Beispiel:
In HTML:
<div class="g-grid"[>] (ohne die eckigen [ ] Klammern!)
<div class="g-block size-25 somepadding">
In CSS:
.somepadding {
Polsterung: 10px;
}
.size-25 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 25%;
-moz-flex: 0 25%;
-ms-flex: 0 25%;
Flex: 0 25%;
Breite: 25%;
flex-basis: auto;
}
Der Fix in CSS:
````css
`*[class*='size-'] {
flex-basis: auto;
}`