Flexbugs: IE11 Ignores width on nested flex element

Created on 28 Nov 2015 · 3Comments · Source: philipwalton/flexbugs

I've tried so many iterations of this... there are zero issues in ff/chrome/safari, but in IE11 the group of 'Element' objects just becomes one long line.

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

Source

scjnsn

👍2

Most helpful comment

IE11 doesn't handle flex-basis: auto + flex-grow: 1 very well when the width of the container isn't definite. I haven't been able to really nail down a consistent repo + workaround, so I haven't documented it.

This fixes your site:
http://codepen.io/anon/pen/OMLRVN

Also, in the future please post a demo rather than just code, otherwise I have to put it together and if I weren't in a good mood I probably wouldn't have done it :)

philipwalton on 2 Dec 2015

👍29 ❤4 🎉4 😄4 👎2

All 3 comments

This fixes your site:
http://codepen.io/anon/pen/OMLRVN

Also, in the future please post a demo rather than just code, otherwise I have to put it together and if I weren't in a good mood I probably wouldn't have done it :)

philipwalton on 2 Dec 2015

👍29 ❤4 🎉4 😄4 👎2

Sincere thank you. This looks like it does the trick!

scjnsn on 2 Dec 2015

mark