'flex-shrink: 0' disables wrapping of contents inside the flex item
Reported by
kwk...@vivliostyle.com,
Jun 27 2016
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2777.0 Safari/537.36 Example URL: http://jsbin.com/povanodeye/edit?html,css,output Steps to reproduce the problem: 1. Open the jsbin URL What is the expected behavior? Text contents of flex items are wrapped and do not overflow the flex items. What went wrong? Text of a flex item with 'flex-shrink: 0' does not wrap and overflows the flex item. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 53.0.2777.0 Channel: canary OS Version: OS X 10.11.5 Flash Version: Shockwave Flash 22.0 r0 'expected.png' is a screenshot of Firefox 50.0a1.
,
Jun 27 2016
Daniel, why does Firefox render this the way it does? I believe we should follow https://drafts.csswg.org/css-flexbox/#hypothetical-main-size step 3.E and and use max-content as the width here (as flex-basis computes to auto = content here)
,
Jun 27 2016
,
Jun 28 2016
Firefox renders it the way it does because the spec didn't used to explicitly mention "max-content" here. It used to just say something like "lay out the item's contents into the available space", which I interpreted as doing something more "fit-content" flavored. (So the flex base size would end up resolving to 200px in the example testcase -- the width of the container.) I think you're correct that Chrome's rendering matches the current spec here. (It does *feel* a bit broken, but as soon as you've got more than one unshrinkable flex item, the "expected" behavior (Firefox's current behavior) gets awkward/broken as well.)
,
Jun 28 2016
Microsoft Edge matches Chrome here, too. This is just a Firefox bug. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1282821
,
Jun 28 2016
Thanks for checking! |
||||
►
Sign in to add a comment |
||||
Comment 1 by dtapu...@chromium.org
, Jun 27 2016