Content suggestion: Caveats to Flex & Grid

[indrora]

What is the new suggestion?

A section that outlines caveats about using Flex and Grid, such as

• ::before and ::after pseudo-elements
• min-width and max-width "not working" because of assumed values

Why is it important or useful?

I spent a week and a half hunting down why my flex-based two-column layout behaved "wrong" and why a loose pre tag was sending my layout into the middle of nowhere.

One or two pages that covers the specific caveats and changes to the CSS model when using display: flex or display:grid would help with this. There's some real zingers that I've discovered that aren't well documented at the moment.

The issue comes down to a simple line in the CSS level 3 spec about widths and auto:

For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0. For backwards-compatibility, the resolved value of this keyword is zero for boxes of all [CSS2] display types: block and inline boxes, inline blocks, and all the table layout boxes. It also resolves to zero when no box is generated.

oh no. What's it say for flex? Let's ask the flex spec, section 9.9.1:

The min-content main size of a single-line flex container is calculated identically to the max-content main size, except that the flex item’s min-content contribution is used instead of its max-content contribution. However, for a multi-line container, it is simply the largest min-content contribution of all the flex items in the flex container.

Oh no.

This means that min-width: auto will cause max-width: <value> to be ignored, plus hard width values within flex containers to be outright ignored.

pre is always a box context (it has to be, since it's handling preformatted text not to be mucked with by the UA) and will cause the min-width of the flex box even when scrollbars are asked for to be the minimum width of the longest line of text.

A simple codepen of the issue can be seen here: https://codepen.io/indrora/pen/KKWEYEj

Setting the rule .container main { min-width: 0; } will cause the content to flow as is expected.

Here's some people and some spec stuff:

• https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow - talking about the gotcha
• https://www.w3.org/TR/css-flexbox-1/#min-size-auto - spec calls out that the default has changed.
• https://www.w3.org/TR/css-sizing-3/#propdef-min-width - spec notes that in CSS2 the default was 0, the default is now auto
• https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes defines that the minimum size of a multi-line flex box is the fit-content width of the largest child or box context

[rachelandrew]

I've actually got a big list of this sort of stuff, so could write something up. I think it's really centered around the different ways things behave when not in normal flow.

Thanks for the suggestion @indrora

[indrora]

A lot of it comes down to "CSS2 had a lot of defaults... Then CSS3 quietly changed those defaults but left everything quirks-compatibly default for the old stuff" and now that new things (grid, flex, etc) are being added to the living standard, a lot of the old standby defaults are not longer what folks expect.

I am curious how many 'css resets' also add unknown gotchas to the standards that people don't know about...

[rachelandrew]

It's really that what you might expect in normal flow is different once you are in a flex or grid formatting context. The reality is that a lot of stuff has been cleaned up and clarified in recent years, however a core tenet of designing CSS is that we don't break the web, so it has to be done in a way that protects legacy sites from suddenly breaking.

[OnkarRuikar]

Setting the rule .container main { min-width: 0; } will cause the content to flow as is expected.

Btw the code has a bug: width: calc(100%-11em); is wrong. The operator needs space around it. If we use width: calc(100% - 2rem - 11rem - 2px) then we get the desired output.

This means that min-width: auto will cause max-width: <value> to be ignored, plus hard width values within flex containers to be outright ignored.

Not really. The container is getting limited at 50em (800px) due to max-width: 50em:

This is the issue of overflow. The issue is the <main> element is overflowing. This could easily be solved simply by using overflow: auto and we don't even need width: calc(100%-11em): https://codepen.io/onkarruikar/pen/QWXjbrG?editors=1100