Chrome: justify/align-content do not work with flexbox

[MondoGao]

With flexbox's flex-grow applying to the grid container, Chrome seems to ignore justify-content

Test case: https://codepen.io/MondoGao/pen/KoYBja

Chrome 66.0:

Firefox 59:

[alinnert]

If you look at the DevTools grid guide lines it seems that rows with a height of 1fr don't span the available vertical space ‒ or the entire grid doesn't grow even if it contains a 1fr row. The grid behaves as if flex-grow was 0. Only the background of the grid container element (= the flex item) grows to full height.

I can still reproduce this in Chrome 69.

I found a solution though: You need to split the grid container from the flex item. The flex item needs to be a (horizontal) flex box itself. Here's a fiddle.