2

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.

Quasipickle
  • 4,383
  • 1
  • 31
  • 53
  • Can you show what the expected behavior is? I just viewed it in Chromium and Firefox with the same results, so it's not specific to Chrome. – jhpratt Dec 13 '17 at 23:51
  • Works fine in FF and Edge. Looks like a bug in Chrome. Probably another issue with nested containers, which [Chrome also struggles with in flexbox on occasion](https://stackoverflow.com/a/34355447/3597276). – Michael Benjamin Dec 14 '17 at 01:23
  • @jhpratt The expected behaviour is for the bottom example to function like the top example. – Quasipickle Dec 14 '17 at 04:52

1 Answers1

1

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;
    /* ... */
}
Blazemonger
  • 90,923
  • 26
  • 142
  • 180