Flexbugs: IE11ネストされたフレックス要素の幅を無視します

作成日 2015年11月28日 · 3コメント · ソース: philipwalton/flexbugs

私はこれを何度も繰り返してみました... ff / chrome / safariには問題はありませんが、IE11では「Element」オブジェクトのグループが1つの長い行になります。

オビ＝ワンを助けて？...

<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>

ソース

scjnsn

👍2

最も参考になるコメント

IE11は、コンテナーの幅が明確でない場合、 flex-basis: auto + flex-grow: 1をうまく処理しません。一貫したレポと回避策を実際に特定することができなかったので、それを文書化していません。

これにより、サイトが修正されます。
http://codepen.io/anon/pen/OMLRVN

また、将来的には、コードだけでなくデモを投稿してください。そうしないと、まとめる必要があります。気分が良くなかったら、おそらくそれをしなかったでしょう:)

philipwalton 2015年12月02日

👍29 ❤4 🎉4 😄4 👎2

全てのコメント3件

これにより、サイトが修正されます。
http://codepen.io/anon/pen/OMLRVN

philipwalton 2015年12月02日

👍29 ❤4 🎉4 😄4 👎2

誠にありがとうございます。これはトリックを行うように見えます！

scjnsn 2015年12月02日

マーク

zd1010150 2017年06月30日

このページは役に立ちましたか？

0 / 5 - 0 評価

Flexbugs: IE11ネストされたフレックス要素の幅を無視します

最も参考になるコメント

全てのコメント3件

関連する問題