Chrome 80 CSS网格大的后代会导致网格增长

Question

当网格具有固定的宽度和高度，并且网格的后代的宽度或高度大于网格的宽度或高度时，后代会强制网格“增长”以适合网格。在早期版本的Chrome（80之前的版本）和最新版本的Firefox（在撰写本文时为73.0）中，网格的后代尊重网格的边界。我看过此更新的release log，似乎找不到任何对grid或grid-template-rows/columns所做更改的提及。

• 预期的行为（Chrome 80 / Firefox之前的版本）
• 实际行为（Chrome 80）

下面是重现该问题的最小片段。

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

我的问题是，这是Chrome漏洞，还是该chrome与CSS网格规范对齐？

Answer 1

这样做的原因是CSS Grid spec change的实现，它涉及跨越有限大小和无限大小的轨道的网格轨道的贡献。我也对此raised an issue。

很高兴Chromium开发小组agreed that this change is not web compatible and causing too much breakage。它已在M80，M81和M82分支上还原，并将以还原的行为（80之前的行为）this week [Respin 116（80.0.3987.116）]交付。

编辑：到目前为止，新的Chrome版本已经发布，并且可以解决这些问题。

编辑2：由于Chromium小组是唯一实际实施上述规范更改的浏览器团队，因此他们决定将其还原，因此实施更改的开发者提出了issue@CSSWG。将自己链接到该网站，如果您想了解它的发展方向。

Answer 2

该版本现在应该可以下载，这可以解决此问题。

我在googlechrome src更改中找到了以下内容

还原“ [css-grid]容纳跨越柔性轨道的跨项目”https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f

还有另外两个问题，对于那些正在寻找的人也出现了同样的问题。

grid-template-columns in Chrome 80 inconsistently computed

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

我在这里是新来的（正在回答），所以我不能在接受的答案下评论这些。

Answer 3

请在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>