94584 2012-08-21 04:06:42 -0700 [Flexbox] Regression: Text overflow broken for flex items 2012-09-27 09:42:04 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Unspecified Unspecified RESOLVED INVALID P2 Normal --- 0 pimvdb webkit-unassigned dholbert james.r.campos ojan tabatkins tony oldest_to_newest 700601 0 159649 pimvdb 2012-08-21 04:06:42 -0700 Created attachment 159649 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) 729164 1 james.r.campos 2012-09-26 20:05:17 -0700 `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. 729183 2 ojan 2012-09-26 21:22:35 -0700 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. 729185 3 ojan 2012-09-26 21:24:46 -0700 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? 729606 4 tabatkins 2012-09-27 09:29:40 -0700 Yeah, I still think the reasoning behind the current behavior is valid. :/ I wonder how I could advertise it better in the spec? 729624 5 ojan 2012-09-27 09:42:04 -0700 (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? 159649 2012-08-21 04:06:42 -0700 2012-08-21 04:06:42 -0700 Test case flexbox_text_overflow.html text/html 1111 pimvdb PCFkb2N0eXBlIGh0bWw+DQo8aHRtbD4NCiAgPGhlYWQ+DQogICAgPHRpdGxlPkZsZXhib3ggdGV4 dCBvdmVyZmxvdyBidWc8L3RpdGxlPg0KDQogICAgPHN0eWxlPg0KICAgICAgLmNvbnRhaW5lciB7 DQogICAgICAgICAgZGlzcGxheTogLXdlYmtpdC1mbGV4Ow0KICAgICAgfQ0KDQogICAgICAuY29u dGFpbmVyID4gZGl2OmZpcnN0LWNoaWxkIHsNCiAgICAgICAgICB3aGl0ZS1zcGFjZTogbm93cmFw Ow0KICAgICAgICAgIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzOw0KICAgICAgICAgIG92ZXJmbG93 OiBoaWRkZW47DQogICAgICB9DQoNCiAgICAgIC5jb250YWluZXIgPiBkaXY6bGFzdC1jaGlsZCB7 DQogICAgICAgICAgLXdlYmtpdC1mbGV4OiAxIDAgYXV0bzsNCiAgICAgICAgICBiYWNrZ3JvdW5k OiByZWQ7DQogICAgICB9DQogICAgPC9zdHlsZT4NCiAgPC9oZWFkPg0KDQogIDxib2R5Pg0KICAg IDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+DQogICAgICAgIDxkaXY+QSBzbWFsbCBsZWZ0IGZsZXgg aXRlbS48L2Rpdj4NCiAgICAgICAgPGRpdj5SaWdodCBmbGV4IGl0ZW08L2Rpdj4NCiAgICA8L2Rp dj4NCg0KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+DQogICAgICAgIDxkaXY+DQogICAgICAg ICAgICBBIGxhcmdlIGxlZnQgZmxleCBpdGVtLg0KICAgICAgICAgICAgQSBsYXJnZSBsZWZ0IGZs ZXggaXRlbS4NCiAgICAgICAgICAgIEEgbGFyZ2UgbGVmdCBmbGV4IGl0ZW0uDQogICAgICAgICAg ICBBIGxhcmdlIGxlZnQgZmxleCBpdGVtLg0KICAgICAgICAgICAgQSBsYXJnZSBsZWZ0IGZsZXgg aXRlbS4NCiAgICAgICAgICAgIEEgbGFyZ2UgbGVmdCBmbGV4IGl0ZW0uDQogICAgICAgICAgICBB IGxhcmdlIGxlZnQgZmxleCBpdGVtLg0KICAgICAgICAgICAgQSBsYXJnZSBsZWZ0IGZsZXggaXRl bS4NCiAgICAgICAgICAgIEEgbGFyZ2UgbGVmdCBmbGV4IGl0ZW0uDQogICAgICAgICAgICBBIGxh cmdlIGxlZnQgZmxleCBpdGVtLg0KICAgICAgICAgICAgQSBsYXJnZSBsZWZ0IGZsZXggaXRlbS4N CiAgICAgICAgPC9kaXY+DQogICAgICAgIDxkaXY+UmlnaHQgZmxleCBpdGVtPC9kaXY+DQogICAg PC9kaXY+DQogIDwvYm9keT4NCjwvaHRtbD4NCg==