Search code examples
htmlcssgoogle-chromecss-grid

Chrome 80 css grid large descendants cause grid to grow

When a grid has a fixed width and height, and a descendent of the grid has a width or height that is larger than that of the grid, the descendent forces the grid to 'grow' to fit it. In previous versions of Chrome (pre 80), and the latest version of Firefox (73.0 at the time of writing this) the descendants of the grid respected the grid's bounds. I've had a look the release log for this update and can't seem to find any mention of changes to grid or grid-template-rows/columns.

  • Expected Behaviour (Pre Chrome 80/Firefox) Expected Behaviour (Pre Chrome 80/Firefox)
  • Actual Behaviour (Chrome 80) Actual Behaviour (Chrome 80)

Below is a minimal snippet to reproduce the problem. 

<div style="
    background-color: lightgray;
    display: grid;
    grid-column-gap: 20px;
    grid-template-areas:
        'header header'
        'form chart'
        'footer chart';
    grid-template-columns: minmax(250px,1fr) 2fr;
    grid-template-rows: 1fr 5fr 1fr;
    height: 330px;
    padding: 20px;
    width: 690px;
">
  <div style="background: red; grid-area: header;"></div>
  <div style="background: green; grid-area: form;"></div>
  <div style="background: blue;grid-area: chart">
    <div style="height: 500px;"></div>
  </div>
  <div style="background: purple; grid-area: footer;"></div>
</div>

My question is, is this a chrome bug, or is this chrome aligning to the css grid spec?

Solution

  • The reason for this is the implementation of a CSS Grid spec change regarding the contribution of grid tracks spanning both finitely and infinitely sized tracks. I've raised an issue about this as well.

    Gladly the Chromium development team agreed that this change is not web compatible and causing too much breakage. It is already reverted on M80, M81 and M82 branches, and is going to be delivered with the reverted behaviour (pre-80-behaviour) this week in respin 116 (80.0.3987.116).

    Edit: As of now, the new Chrome version is out and fixes these problems.

    Edit 2: Because the Chromium team was the only browser team that actually implemented the aformentioned spec change, and they decided to revert it, the developer that implemented the changes raised an issue@CSSWG. Link yourself to that if you wanna see where this is going.

    enter image description here