Chrome 80 css网格大后代导致网格增长[重复]答案

【问题标题】：Chrome 80 css grid large descendants cause grid to grow [duplicate]Chrome 80 css网格大后代导致网格增长[重复]
【发布时间】：2020-05-29 01:40:15
【问题描述】：

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

预期行为（Chrome 80/Firefox 之前）
实际行为 (Chrome 80)

下面是重现问题的最小 sn-p。

<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 网格规范对齐？

【问题讨论】：

我无法了解规范，但我看到了类似的行为。 Safari 和 Firefox 的行为都是正确的，因此 Chrome 似乎要么违反规范，要么规范不明确。问题似乎是 Chrome 的布局引擎只考虑跨两行的 div 中第一个“行”的大小，而不是在两组行约束之间分布可用高度。我会说值得向 Chromium 提交错误
感谢您查看 @MattD，我已与 Chromium 团队一起打开 a bug，并将随着错误的进展更新此问题

标签： html css google-chrome css-grid

【解决方案1】：

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

【讨论】：

感谢您的回答 Mehul ，这确实解决了这个问题，但是我不清楚为什么它会解决它。在 Chrome 和 Firefox 上，该元素都有display: block，但为什么它在两个浏览器上的行为不同？是 Chrome 中的错误还是 Firefox 与 css-grid 规范不一致？

【解决方案2】：

这样做的原因是CSS Grid spec change 的实施，该CSS Grid spec change 涉及跨越有限和无限大小轨道的网格轨道的贡献。我也已经 raised an issue 讨论过这个问题。

很高兴 Chromium 开发团队 agreed that this change is not web compatible and causing too much breakage。它已在 M80、M81 和 M82 分支上恢复，并将在 respin 116 (80.0.3987.116) 中以恢复的行为（80 前行为）this week 交付。

编辑：截至目前，新的 Chrome 版本已经发布并修复了这些问题。

编辑 2：由于 Chromium 团队是唯一实际实施上述规范更改的浏览器团队，并且他们决定恢复它，因此实施更改的开发人员提出了issue@CSSWG。如果你想看看这是怎么回事，请把自己链接到那个。

【讨论】：

【解决方案3】：

现在应该可以下载恢复此问题的版本。

我在 google chromium src changes 中发现了以下内容

Revert "[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

我是新来的（回答），所以我无法在接受回答时评论这些。

【讨论】：