Chrome 80 css grid large descendants cause grid to grow

Question

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\'

Answer 1

The version should be available for download right now that reverts this issue.

I have found the following at google chromium src changes

Revert "[css-grid] Accommodate spanning items crossing flexible tracks" https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f

Also two more questions popped up with this same problem for those looking.

grid-template-columns in Chrome 80 inconsistently computed

Why does Chrome 80 cause this grid-template-rows: auto problem

I am new here (answering) so I couldn't comment these under at the accept answer.

Answer 2

Please Update Below HTML

<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;display: inline;"></div>
  </div>
  <div style="background: purple; grid-area: footer;"></div>
</div>
</div>

Answer 3

eThe 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.