- From: Daniel Tonon via GitHub <sysbot+gh@w3.org>
- Date: Sun, 23 Feb 2020 14:11:12 +0000
- To: public-css-archive@w3.org
Dan503 has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-text][css-flexbox][css-grid][css-box-sizing] - Wrapped text does not reduce box size width == Note that the blue in the examples represent what flexbox and CSS Grid percieve to be the size of the item content. The white space around the blue is the calculated white space distribution. ## How flexbox currently works There is one long item whose text will wrap. All other items are short one word items.  When the long item text wraps, flexbox does not use the new wrapped text width for its measurements. It still takes up space assuming that the text has not wrapped. This gives the long item far more space than it needs in the layout. This throws off the white space balance in the design. It also makes things with lots of text appear more important than their sibling elements. In reality the item is just as import as the other items. ## Also a problem in CSS Grid ``` grid-template-columns: repeat(9, auto); ```  ## How I wish flexbox and CSS Grid worked instead I wish flexbox and Grid could factor in the width of the text after it has wrapped when calculating how wide the item content is.  This would allow for much better white space distribution in practically all implementations. To prevent potential backwards compatibility issues, a new CSS property could be added to the flex/grid container to get the desired box sizing behavior. ---- Codepen version of this issue showing source code for examples: https://codepen.io/daniel-tonon/pen/VwLmqvb CSS Grid Track sizing spec https://drafts.csswg.org/css-grid/#algo-track-sizing Flexbox sizing spec https://drafts.csswg.org/css-flexbox/#main-sizing Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4801 using your GitHub account
Received on Sunday, 23 February 2020 14:11:13 UTC