Created attachment 159649 [details]
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)
`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.
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.
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?
Yeah, I still think the reasoning behind the current behavior is valid. :/ I wonder how I could advertise it better in the spec?
(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?