CSS Grid - layout is messed up

[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 messed up

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.

This seems to be the same in Safari and Firefox too.

From webcompat.com with ❤️

[karlcow]

hey @samdbeckham thanks for the report.

I have the same behavior in all 3 browsers.
I wonder what @jensimmons is thinking about it.

I wonder if it's an issue worth reporting here.
https://github.com/w3c/csswg-drafts/labels/css-grid-1

[samdbeckham]

I hadn't thought about it reporting it there. I've filed an issue on the csswg-draft repo and linked back to this issue. Hopefully someone can pick it up there.

[samdbeckham]

Apparently this is expected behaviour with the fr measurement. In order to make it behave as I expected, you need to specify a width of minmax(0%, 1fr) as opposed to just having 1fr.

There's more info in this comment