Let's say I want to divide all the space of flex container proportionally without regard for flex item content size. I use flex-basis: 0px on each item to tell the flex container to treat the size of each flex items as 0 before dividing up the container's space.
This should result in three equally sized boxes:
<div style="display: flex">
<div style="flex: 1 1 0px">xyz</div>
<div style="flex: 1 1 0px">0123456789</div>
<div style="flex: 1 1 0px">abcdefghijklmnopqrstuvwxyz</div>
</div>
I find this works the same in both IE11 and Chrome if the container is larger than the content. We get three equally sized boxes as expected:
This should work exactly the same if the container is smaller than the content, since I'm telling the flex container than the content is sized 0px:
<div style="display: flex; width: 400px;">
<div style="flex: 1 1 0px">xyz</div>
<div style="flex: 1 1 0px">0123456789</div>
<div style="flex: 1 1 0px">abcdefghijklmnopqrstuvwxyz</div>
</div>
In IE11 it does exactly what I expect:
However, in Chrome, it starts taking the size of the content into account as if we were using flex-basis: auto rather than 0px.
Here's a Plunker demonstrating the problem. View it both IE11 and Chrome to see the different behaviors yourself.
I can work around this in Chrome by using overflow: hidden, but when bringing this info back to my team I'd like to know which behavior is correct.
My question is who is behaving correctly here, IE11 or Chrome? According to my understanding of flex-basis: 0px, I think (surprisingly) IE11's behavior is correct, treating all space as in the container as flexible without regard for item content size (or rather, treating the item content as size 0px as it was asked to).
