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)
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?

回答1:

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 devloper that implemented the changes raised an issue@CSSWG. Link yourself to that if you wanna see where this is going.

回答2:

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.

回答3:

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>

来源：https://stackoverflow.com/questions/60206276/chrome-80-css-grid-large-descendants-cause-grid-to-grow

标签

html

css

google-chrome

css-grid