[css-grid] <pre> blocks are breaking grid layout

[samdbeckham]

URL: https://codepen.io/samdbeckham/pen/LLevOP?editors=0100
Browser / Version: Chrome 59.0.3071
Operating System: Mac OS X 10.11.6
Problem type: Layout is breaking

Steps to Reproduce:

1. Navigate to: https://codepen.io/samdbeckham/pen/LLevOP?editors=0100
2. Have a read, I've isolated and outlined the issue.
3. Play about with the CSS in the editor on the right

Expected Behavior:

The bottom example should behave like the top example (in regards to the <pre> block)

Actual Behavior:

It breaks out of it's container and messes up the grid.

Whilst I noticed this in Chrome, it appears to be happening in Safari, and Firefox as well. I don;t have a testing setup for Edge but I'd wager it's happening there too.

This is crossposted from the webcompat github

[rachelandrew]

apologies for - deleted - reply, transposed two subject lines and thought this was on a different repo!

[SelenIT]

I believe that this example behaves as specified. But it's the specified behavior of the fr units that is really a bit counter-intuitive (I ran into a similar issue myself, though with the table element, recently). It turns out that the grid tracks sized with fr has the implied minimum width of auto:

If the product of the hypothetical fr size and a flexible track’s flex factor is less than the track’s base size, restart this algorithm treating all such tracks as inflexible.

So if a fr-sized track has some wide non-wrappable content (wide image, table or pre block with long lines), it can't get narrower than this content. The workaround for this is replacing 1fr with something like minmax(0%, 1fr) (see the forked Codepen).

[tabatkins]

Yes, this is behaving as specified. @SelenIT got it - fr defaults to a min-content-size minimum, and since nothing in .sidebar has a size at all, it falls down until it hits the pre, which has a large min-content size. Solution is either to do what @SelenIT suggests (force the track to a min size of 0), or add a size to the pre.

[fantasai]

See also #1865