IE11 Bug : Flexbox mit min-Height
Flexbox ist eine tolle Sache – und der Flexbox-Standard wird mittlerweile von den allermeisten Browsern entsprechend unterstützt. Selbst Internet Explorer 10 und 11 können grundsätzlich damit umgehen. Wenn man ein Element an den Anfang, die Mitte oder ans Ende setzen möchte, dann kann man dies mit „align-items“ tun. Flex-Start / Center / Baseline und Flex-End sind die Mittel der Wahl. Im IE10 verwendet man als Auszeichnung noch „ms-flex-align“, im IE 11 ist es dann auch glücklicherweise „align-items“. Eine saubere Definition für alle Eventualitäten wäre dann:
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
Leider gibt es da bei komplexeren bzw. verschachtelten Layouts ein Problem. Hier haut dann ein gemeiner Bug im IE 11 rein, der dann alles was nicht „oben“ (flex-start) positioniert ist, immer wieder nach oben schiebt. Microsoft schreibt auf seiner Bug-Report-Seite dazu:
In all other browsers that support flexbox, a `flex-direction:column` based flex container will honor the containers `min-height` to calculate `flex-grow` lengths. In IE10 & 11-preview it only seems to work with an explicit `height` value.
Gefixt wurde das dann auch nicht, da man ja nur noch Sicherheitslücken patcht, wenn überhaupt:
thank you for the feedback. This issue appears to have been fixed in Microsoft Edge. We’re not presently working on feature bugs in Internet Explorer outside of security-related issues.
Best Regards, The Microsoft Edge Team
Was also tun? Die einzige Möglichkeit, um dem IE11 das korrekt beizubringen, ist also dem fraglichen Element eine HEIGHT zu geben. Häufig wird jedoch mit „min-height“ gearbeitet, was der IE11 aber nicht so richtig versteht. Hat man z.B. einem DIV gesagt, es solle bitte 33% des Bildschirms in der Höhe einnehmen (min-height: 33vh), dann muss man zusätzlich noch height: 33vh im CSS hinzufügen. Und dann klappt ein „positioniere mir das bitte ans Ende“ auch im alten Internet Explorer 11…