Html 为什么一个1fr CSS网格列会中和；溢出：滚动“；它的孩子<；预处理>；块以及为什么minmax（1px，1fr）修复它？

在放置在

元素内的HTML结构中：

结论 同侧眼线

如您所见，第二个子元素（即

元素）具有

第二列延伸以包含
块的整行，使
溢出-x:auto
块上的code>，并将第三列从视图中推到右侧：


但是，如果我更改
网格模板列：1fr 1fr 1fr到
网格模板列：1fr最小值（1px，1fr）1fr，所有三列的宽度都相等，并且
块的
溢出-x:auto生效


如果我没有弄错的话，在这个场景中，
minmax（1px，1fr）
应该解析为
1fr
，并使第二个网格实际上与第一个网格相同。那么为什么它会改变网格的呈现方式呢？
这种行为可以通过网格列的默认
min width
以及浏览器如何解释
minmax
函数来解释

网格列的默认
最小宽度
默认情况下，网格列的
minwidth
为
auto
。如中所述，这将导致列“无限大”，这意味着其内容会影响其宽度并扩展它

可以通过将列的
min width
设置为
auto
以外的值来覆盖此行为，例如
0px
、
1px
，或任何其他有意义的值

浏览器如何解释
minmax（1px，1fr）
和
minmax（auto，1fr）
根据的
minmax
参考页：

具有两个参数的函数，最小值和最大值

每个参数可以是
、
、
值，或关键字值
最大内容
、
最小内容
、或
自动

如果maxminmax（min，max）
视为min。作为最大值，
值设置栅格轨迹的弹性系数；它至少是无效的

但是，它没有解释当应用于网格列时，
minmax
是否会更改
width
或
minwidth
和
max width
属性的行为

至少在这种情况下，
minmax
的解释方式类似于：

类似地，
minmax（自动，1fr）
的解释类似于：

但如前所述，根据列的内容，
minwidth:auto
将允许浏览器扩展列的宽度，甚至超出
1fr
——这可能会引起混淆。
如中所述，是其内容的大小（即
最小宽度：自动
/
最小高度：自动
）。当您将
minmax（）
函数的最小值设置为1px时，您（显然）覆盖了该初始设置。@Michael\u但在这种特殊情况下，
minmax（1px，1fr）
，应该解析为
1fr
（我认为），但不是。这句话的哪一部分解释了这种行为？这个被标记为的问题也不能解释这一点。那么你能解释一下为什么你把它标记为一个副本吗？我读了你的两个问题。这两种情况下的
minwidth:auto
默认值解释并解决了问题。不过，我会在工作结束后进一步研究这个问题。您使用的是什么浏览器？此外，如果您认为副本不相关或不有用，请随时重新打开。@Michael_B如果您不介意，我将重新打开此浏览器，因为链接问题中没有解释
minmax
的这一特殊行为，至少我解释它的方式没有解释规范（和MDN）这并不能解释这种行为。
<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>

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;
}

min-width: 1px;
max-width: 1fr;

min-width: auto;
max-width: 1fr;