Flexbugs: IE11 Mengabaikan lebar pada elemen fleksibel bersarang

Dibuat pada 28 Nov 2015  ·  3Komentar  ·  Sumber: philipwalton/flexbugs

Saya sudah mencoba banyak iterasi ini ... tidak ada masalah di ff/chrome/safari, tetapi di IE11 grup objek 'Elemen' hanya menjadi satu garis panjang.

Bantu aku 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>
picture scjnsn
👍2

Komentar yang paling membantu

IE11 tidak menangani flex-basis: auto + flex-grow: 1 dengan sangat baik ketika lebar wadah tidak pasti. Saya belum dapat benar-benar menemukan repo + solusi yang konsisten, jadi saya belum mendokumentasikannya.

Ini memperbaiki situs Anda:
http://codepen.io/anon/pen/OMLRVN

Juga, di masa depan tolong posting demo daripada hanya kode, kalau tidak saya harus menggabungkannya dan jika saya tidak dalam suasana hati yang baik, saya mungkin tidak akan melakukannya :)

picture philipwalton pada 2 Des 2015
👍29 ❤4 🎉4 😄4 👎2

Semua 3 komentar

IE11 tidak menangani flex-basis: auto + flex-grow: 1 dengan sangat baik ketika lebar wadah tidak pasti. Saya belum dapat benar-benar menemukan repo + solusi yang konsisten, jadi saya belum mendokumentasikannya.

Ini memperbaiki situs Anda:
http://codepen.io/anon/pen/OMLRVN

Juga, di masa depan tolong posting demo daripada hanya kode, kalau tidak saya harus menggabungkannya dan jika saya tidak dalam suasana hati yang baik, saya mungkin tidak akan melakukannya :)

philipwalton picture philipwalton pada 2 Des 2015
👍29 ❤4 🎉4 😄4 👎2

Terima kasih yang tulus. Ini sepertinya berhasil!

scjnsn picture scjnsn pada 2 Des 2015

tanda

zd1010150 picture zd1010150 pada 30 Jun 2017
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

DrummerHead picture DrummerHead  ·  7Komentar
RwwL picture RwwL  ·  5Komentar
walidvb picture walidvb  ·  4Komentar
zomigi picture zomigi  ·  4Komentar
zgreen picture zgreen  ·  4Komentar