Bug 94584

Summary: [Flexbox] Regression: Text overflow broken for flex items
Product: WebKit Reporter: pimvdb
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: dholbert, james.r.campos, ojan, tabatkins, tony
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Test case none

pimvdb
Reported 2012-08-21 04:06:42 PDT
Created attachment 159649 [details] Test case Scenario: 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. Problem: 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)
Attachments
Test case (1.08 KB, text/html)
2012-08-21 04:06 PDT, pimvdb 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
James Campos
Comment 1 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.
Ojan Vafai
Comment 2 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.
Ojan Vafai
Comment 3 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?
Tab Atkins
Comment 4 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?
Ojan Vafai
Comment 5 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?
Note You need to log in before you can comment on or make changes to this bug.