white-space: nowrap and overflow:hidden exceeding width of the parent flexbox container
Reported by
andrei.d...@gmail.com,
Sep 15 2016
|
||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.8 (KHTML, like Gecko) Version/9.1.3 Safari/601.7.8 Example URL: http://codepen.io/deioo/pen/ZpWRpK Steps to reproduce the problem: 1. Create a fixed-width flexbox container 2. Add one fixed width column, one fluid 3. Add ellipsis text inside the fluid container, with overflow: hidden, text-overflow: elipsis, white-space: nowrap What is the expected behavior? The ellipsis text should shrink based on the parent width What went wrong? The ellipsis text overflows the parent container. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? No Firefox Chrome version: <Copy from: 'about:version'> Channel: n/a OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 22.0 r0 The fix is to pass a min-width: 0 to the fluid flexbox item. This probably makes the browser re-calculate the width and render the content properly. Tested and works with Safari, doesn't work with Chrome and Firefox (latest versions).
,
Sep 15 2016
In Flexbox, min-width defaults to min-content (more or less -- see https://drafts.csswg.org/css-flexbox/#min-size-auto for details). Therefore, if you use nowrap, you'd expect min-width to be a large value. This behavior is expected and min-width: 0 is the right fix. As you note, Firefox behaves the same. I believe so does Edge but I can't immediately test it. I wish Safari updated their Flexbox implementation as well. |
||
►
Sign in to add a comment |
||
Comment 1 by bokan@chromium.org
, Sep 15 2016Components: -Blink Blink>Layout>Flexbox
Status: Untriaged (was: Unconfirmed)