gpt4 book ai didi

html - Chrome 80 css 网格大后代导致网格增长

转载 作者:行者123 更新时间:2023-12-02 16:46:47 25 4
gpt4 key购买 nike

<分区>

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

  • 预期行为(Chrome 80 之前/Firefox) Expected Behaviour (Pre Chrome 80/Firefox)
  • 实际行为(Chrome 80) Actual Behaviour (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 网格规范对齐?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com