When a flex element has a child img that is larger than itself, flex-basis is ignored. Better illustrated:
http://jsfiddle.net/walidvb/hsm77su5/7/
The workaround i found was to not use flex-basis, but width instead(which kind of defeats the whole purpose.)
hm, try this
http://codepen.io/jpdevries/pen/waeNze
i had to set a min-width:0
on .flex-item
which is something that has been discussed here
https://github.com/philipwalton/flexbugs/issues/39#issuecomment-111578174
This also fixed a similar issue in Chrome 57.0.2987.98 (64-bit).
I think this issue has been resolved. Feel free to comment if there's more to discuss.
child's css:
flex: 0 0 100px;
if child's width large than 100px, the limit not works, needs to set "width: 100px" to fix....
In firefox 52 esr, width: 100px not works also.
Most helpful comment
hm, try this
http://codepen.io/jpdevries/pen/waeNze
i had to set a
min-width:0
on.flex-item
which is something that has been discussed herehttps://github.com/philipwalton/flexbugs/issues/39#issuecomment-111578174