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。

还有一些屏幕截图：