Search code examples
cssgoogle-chromegrid-layout

Why does Chrome not expand an outer grid when the inner grid does

I have a nested grid layout made with capital G Grid styles. In the nested grid there is an image set to 100% width, which causes its height to grow proportionally and its immediate parent grid to expand vertically. However, in Chrome the grand-parent grid does not grow.

I've mocked up the situation here: https://codepen.io/anon/pen/vpEVZj?editors=1100

The first, .single-grid displays fine, but the second .outer-grid does not.

Is this a bug in Chrome or am I missing something?

Edit: Today, neither the demo, nor my application are showing this issue. Maybe it's just a humpday issue.

Solution

  • Not sure what the reason is, but you can get the expected behavior in Chrome by changing grid-template-columns: auto to 1fr:

    .outer-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* ... */
}