Chrome 80中的网格模板列计算不一致[重复]

Question

我有一个包含四个表单的页面。每个表单的布局都是使用以下 CSS 网格配置定义的，该配置在所有表单之间共享：

.base-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-row-gap: 1em;
    grid-column-gap: 1em;
    width: 75%;
}

自从 Chrome 80 发布以来，这些表单中的第一个的样式已经（某种程度上）被打破了。 grid-template-columns 的计算值是不一致的，但仅适用于四种形式中的第一种。对于以下三种形式——它们使用相同的基本网格定义——网格的列是统一大小的，这是我在使用 repeat(12, 1fr) 时所期望的。在 Chrome 80 之前，情况并非如此：所有表单的网格都有统一大小的列。

在其他浏览器（Safari 和 Firefox）中，列按预期呈现。 Chrome 80 中是否有一些变化会导致这种情况？搜索 Chrome 更新日志，我似乎找不到任何相关内容。

我尝试查看是否有任何范围更广的 CSS 规则可能导致此问题，但我找不到任何东西。我承认我不是最高级的 CSS 用户，所以我肯定会错误地配置网格，或者其他什么，但是看看下面链接的 Stackblitz 看看是否是这种情况。

---

我看到了其他几个类似的 Stackoverflow 问题，但似乎没有一个完全符合我所看到的问题：

CSS grid behaviour different in Chrome and Firefox

--> 可能与我的问题最相似，但没有任何相关的解决方案，但确实有问题的确认

Has anybody faced issue working with Chrome 80 and CSS Grid

--> 类似于我的问题，但它没有一个很好的问题示例，因此它没有任何有用的响应

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

--> 配置与我的情况非常不同，因此与我所看到的内容无关

---

不管怎样，这是一个使用 Angular Material 的 Angular 8 应用程序，但我很确定这不是问题的根源，尤其是考虑到它在其他浏览器中的工作原理。

这是一个复制问题的 Stackblitz（确保在 Chrome 80+ 中打开）：editable & (inspectable) hosted app。

这里还有一些截图：

第一种形式

Chrome Devtools - grid outline

Firefox Devtools - grid outline

Chrome Devtools - non-uniformly-computed grid column widths

后期形式，使用相同的基本网格定义

Chrome Devtools - grid outline

Chrome Devtools - uniformly-computed grid column widths

Answer 1

您的问题与您链接的the question 几乎相似¹（我也回答了），它与 chrome 如何处理等于minmax(auto,1fr) 的1fr 有关。

使用minmax(0,1fr) 似乎可以解决问题，但我需要深入挖掘才能找出原因。这要么是一个错误，要么是他们改变了 minmax() 的计算方式。

将更新错误报告或详细说明

¹：这些问题涉及行配置，我们需要做相反的事情。使用1fr (minmax(auto,1fr)) 而不是minmax(0,1fr)

Answer 2

今天早上我也遇到了同样的问题。我在我负责的一个页面上报告了当时最新的 chrome 版本的错误。 我确保我安装了最新的 chrome，今天早上去检查问题，1fr 真的没有得到尊重。也许 15 分钟前我继续报告了 chrome 错误，那里有新的更新待定，所以我再次更新了 chrome，今天第二次，问题得到了解决。

我做了一些挖掘，我很确定他们确实改变了 css 网格的处理方式，更具体地说：

[css-grid] 容纳跨越灵活轨道的跨越项目

但由于它导致整个网络中断，他们恢复了更改。 我认为这里引用了https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f。

编辑：还有这个答案为其他有此问题的人提供了更多详细信息 https://stackoverflow.com/a/60284361/12285468