Flexbugs: IE11 Ignoriert die Breite auf verschachtelten Flex-Elementen

Erstellt am 28. Nov. 2015 · 3Kommentare · Quelle: philipwalton/flexbugs

Ich habe so viele Iterationen davon ausprobiert ... es gibt keine Probleme in ff/chrome/safari, aber in IE11 wird die Gruppe der 'Element'-Objekte nur zu einer langen Zeile.

Helfen Sie mir, obi-wan?...

<html ><body>
<style>
.outer-rowwrap{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:1200px;height:100%;background-color:#f0f0f0;}
.inner-rowwrap{display:flex;flex-direction:row;flex-wrap:wrap;}
.nested-element{width:100px;text-align:center;border:1px solid #333;margin:5px;}
.nogrow{flex-grow:0;flex-shrink:0;flex-basis:auto;}
.grow1{flex-grow:1;flex-shrink:1;flex-basis:auto;}
</style>
<div class="outer-rowwrap">
    <div class="nogrow" style="width:200px;background-color:#ccc;">column here</div>
    <div class="grow1">
        <div class="inner-rowwrap">
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
        </div>
    </div>
</div>
</body>
</html>

Quelle

scjnsn

👍2

Hilfreichster Kommentar

IE11 verarbeitet flex-basis: auto + flex-grow: 1 nicht sehr gut, wenn die Breite des Containers nicht eindeutig ist. Ich war nicht in der Lage, einen konsistenten Repo + Workaround zu finden, also habe ich ihn nicht dokumentiert.

Dies repariert Ihre Website:
http://codepen.io/anon/pen/OMLRVN

Außerdem poste bitte in Zukunft lieber eine Demo als nur Code, sonst muss ich es zusammenbauen und wenn ich keine gute Laune hätte, hätte ich es wahrscheinlich nicht gemacht :)

philipwalton am 2. Dez. 2015

👍29 ❤4 🎉4 😄4 👎2

Alle 3 Kommentare

Dies repariert Ihre Website:
http://codepen.io/anon/pen/OMLRVN

Außerdem poste bitte in Zukunft lieber eine Demo als nur Code, sonst muss ich es zusammenbauen und wenn ich keine gute Laune hätte, hätte ich es wahrscheinlich nicht gemacht :)

philipwalton am 2. Dez. 2015

👍29 ❤4 🎉4 😄4 👎2

Herzlichen Dank. Das sieht so aus, als würde es den Trick machen!

scjnsn am 2. Dez. 2015

markieren

zd1010150 am 30. Juni 2017

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Flexbugs: IE11 Ignoriert die Breite auf verschachtelten Flex-Elementen

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen