在这个位于 <body> 内的 HTML 结构中元素 (demo here) :
<div class="grid-1">
<header>
<a href="/">Home</a>
</header>
<main>
<article>
<h1>Test</h1>
<h2 id="overview">Overview</h2>
<p>Lorem ipsum.</p>
<div>
<div>
<pre><code>Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
</code></pre>
</div>
</div>
<h2 id="conclusion">Conclusion</h2>
<p>Lorem ipsum.</p>
</article>
</main>
<footer>
<a href="/">Home</a>
</footer>
如您所见，第二个子元素(即
<main> 元素)具有 <pre>用几行冗长的代码块。当此 CSS 样式表应用于该 HTML 结构时:
html,
body {
margin: 0;
padding: 0;
}
.grid-1 {
margin-bottom: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
header {
background: hsl(209, 36%, 90%);
padding: 10px;
}
main {
background: hsl(209, 36%, 80%);
padding: 10px;
}
footer {
background: hsl(209, 36%, 70%);
padding: 10px;
}
pre {
border: 1px solid black;
padding: 10px;
overflow-x: auto;
}
第二列延伸到包含
<pre> 的整行。 block ，制作 overflow-x: auto;在 <pre> block 被有效地忽略，并将第三列推出 View 并向右推:
但是，如果我更改
grid-template-columns: 1fr 1fr 1fr;至grid-template-columns: 1fr minmax(1px, 1fr) 1fr; ，所有三列都分配了相同的宽度，<pre> block 的overflow-x: auto;生效。
如果我没记错的话，在这种情况下，
minmax(1px, 1fr)应解析为 1fr并使第二个网格实际上与第一个网格相同。那为什么它会改变网格的渲染方式呢？
最佳答案
默认情况下可以解释此行为 min-width网格列的数量以及浏览器如何解释 minmax功能。
默认 min-width网格列
默认情况下，网格列的 min-width的 auto .如 Preventing a Grid Blowout 中所述，这将导致列“无限大小”，这意味着它的内容可以影响它的宽度并扩大它。
可以通过设置 min-width 来覆盖此行为。列到 auto 以外的内容，如 0px , 1px ，或任何其他有意义的东西。
如何minmax(1px, 1fr)和 minmax(auto, 1fr)由浏览器解释
根据MDN的 minmax 的引用页:
A function taking two parameters, min and max.
Each parameter can be a
<length>, a<percentage>, a<flex>value, or one of the keyword valuesmax-content,min-content, orauto.If max < min, then max is ignored and
minmax(min,max)is treated as min. As a maximum, a<flex>value sets the flex factor of a grid track; it is invalid as a minimum.
但是它没有解释
minmax ，当应用于网格列时，会更改 width 的行为, 或 min-width和 max-width特性？原来
minmax ，至少在这种情况下，被解释为类似于:min-width: 1px;
max-width: 1fr;
同样，
minmax(auto, 1fr)将被解释为:min-width: auto;
max-width: 1fr;
但如前所述，根据列的内容，
min-width: auto;将允许浏览器扩展列的宽度，甚至超出 1fr ——一个潜在的混淆点。
关于html - 为什么 1fr CSS 网格列会中和其子 <pre> block 的 "overflow: scroll"以及为什么 minmax(1px, 1fr) 修复它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52587749/