Bug 94584 - [Flexbox] Regression: Text overflow broken for flex items
Summary: [Flexbox] Regression: Text overflow broken for flex items
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2012-08-21 04:06 PDT by pimvdb
Modified: 2012-09-27 09:42 PDT (History)
5 users (show)

See Also:

Test case (1.08 KB, text/html)
2012-08-21 04:06 PDT, pimvdb
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description pimvdb 2012-08-21 04:06:42 PDT
Created attachment 159649 [details]
Test case


A flexbox with two flex items:

 - The left flex item contains of one line of text (`white-space: nowrap`) and should show ellipsis when the text doesn't fit.
 - The right flex item (which is red) should take up all available space using `-webkit-flex: 1 0 auto`. The `auto` is there so that the element keeps at least its minimum size.


When the left flex item has too much text, it overflows out of the flexbox container, showing no ellipsis. The right flex item is pushed out of the flexbox.

This rendered fine on Chrome 21, but is broken on Chrome 23. That is, in Chrome 21 the right column has its minimum size and is anchored to the right, with the left column showing ellipsis. In Chrome 23, however, there is no ellipsis and the left column overflows out of the flexbox, pushing the right flex item away.

For the record, here are the Chrome/WebKit versions used:

Chrome 21.0.1180.79 - WebKit 537.1 (correct rendering)
Chrome 23.0.1240.0 - WebKit 537.6 (wrong rendering)
Comment 1 James Campos 2012-09-26 20:05:17 PDT
`overflow` is broken, which subsequently breaks `text-overflow`.

My test case displaying broken `overflow`: http://jsfiddle.net/BEFN7/1/.

Chromium bug: http://code.google.com/p/chromium/issues/detail?id=152386.
Comment 2 Ojan Vafai 2012-09-26 21:22:35 PDT
The problem is that flex-items have min-width:auto, which means min-width: min-content. If you set min-width: 0 on the flex item, then you get the correct overflow behavior. This is correct per the flexbox spec.
Comment 3 Ojan Vafai 2012-09-26 21:24:46 PDT
Tab, we've now gotten two bugs (this one and http://crbug.com/152386) filed confused about why text-overflow doesn't work on flex-items. I suppose there's no point in bringing this to the CSSWG to see if they want to reconsider this?
Comment 4 Tab Atkins 2012-09-27 09:29:40 PDT
Yeah, I still think the reasoning behind the current behavior is valid. :/  I wonder how I could advertise it better in the spec?
Comment 5 Ojan Vafai 2012-09-27 09:42:04 PDT
(In reply to comment #4)
> Yeah, I still think the reasoning behind the current behavior is valid. :/  I wonder how I could advertise it better in the spec?

Maybe an example + note explicitly calling out text-overflow/overflow cases?