Chrome 80 CSS网格大后代导致网格增长 [英] Chrome 80 css grid large descendants cause grid to grow

问题描述

当网格具有固定的宽度和高度，并且网格的后代的宽度或高度大于网格的宽度或高度时，后代会强制网格增长"以适合网格.在早期版本的Chrome(80之前的版本)和最新版本的Firefox(在撰写本文时为73.0)中，网格的后代尊重网格的边界.我看过

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

解决方案

这样做的原因是也提出了一个问题./p>

很高兴Chromium开发团队同意此更改不是网络兼容并造成太多损坏.它已经在M80，M81和M82分支上还原，并且将以还原的行为(80之前的行为)进行交付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?

解决方案

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.

这篇关于Chrome 80 CSS网格大后代导致网格增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！