Flexbugs: Firefox doesn't apply flex-basis if children have larger image

Created on 5 May 2015  路  4Comments  路  Source: philipwalton/flexbugs

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

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 here
https://github.com/philipwalton/flexbugs/issues/39#issuecomment-111578174

All 4 comments

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.

Was this page helpful?
0 / 5 - 0 ratings