Repository navigation
[css-grid] <pre> blocks are breaking grid layout #1589
Description
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:
- Navigate to: https://codepen.io/samdbeckham/pen/LLevOP?editors=0100
- Have a read, I've isolated and outlined the issue.
- 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
Activity
[-]`<pre>` Blocks are breaking grid layout[/-][+][css-grid] `<pre>` Blocks are breaking grid layout[/+][-][css-grid] `<pre>` Blocks are breaking grid layout[/-][+][css-grid] `<pre>` blocks are breaking grid layout[/+]rachelandrew commentedon Jul 10, 2017
apologies for - deleted - reply, transposed two subject lines and thought this was on a different repo!
SelenIT commentedon Jul 11, 2017
I believe that this example behaves as specified. But it's the specified behavior of the
frunits that is really a bit counter-intuitive (I ran into a similar issue myself, though with thetableelement, recently). It turns out that the grid tracks sized withfrhas the implied minimum width ofauto:So if a
fr-sized track has some wide non-wrappable content (wide image, table orpreblock with long lines), it can't get narrower than this content. The workaround for this is replacing1frwith something likeminmax(0%, 1fr)(see the forked Codepen).tabatkins commentedon Jul 11, 2017
Yes, this is behaving as specified. @SelenIT got it -
frdefaults to a min-content-size minimum, and since nothing in.sidebarhas a size at all, it falls down until it hits thepre, which has a large min-content size. Solution is either to do what @SelenIT suggests (force the track to a min size of0), or add a size to thepre.fantasai commentedon Oct 18, 2017
See also #1865