【发布时间】：2021-06-08 19:57:41
【问题描述】：
我刚开始使用网格布局，并注意到它在相同的视口大小上呈现不同：
(2) 使用 按钮调整浏览器窗口大小后，左侧边栏中的文本将被换行：
(3) 在不改变大小的情况下刷新浏览器窗口后，去掉左侧边栏中的换行： 注意左侧边栏中的文本突然不再换行，而视口大小仍然相同！
怎么可能？我在 Windows 上使用 Chrome 89.0.4389.82（最新稳定版）。使用 Firefox 86 我也有奇怪的大小调整效果（在小窗口上换行，并且在最大化时换行不会被删除）。想知道两个主要浏览器在简单网格上可能有错误吗？我做错了什么/遗漏了什么？
使用 CSS/HTML：
<style type="text/css">
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto minmax(0, 1fr);
}
header {
background-color: #add790;
text-align: center;
grid-column: span 2;
}
nav {
background-color: orange;
overflow: auto;
padding: 1em;
}
article {
overflow: auto;
padding: 1em;
}
</style>
<header>
<h1>Title</h1>
</header>
<nav>
<p>Navigation</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
</nav>
<article>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
</article>
更新：添加nav > p { min-width: max-content; }规则：
调整窗口大小后： 点击刷新后： 请注意文本和滚动条之间的红色标记间隙。
更新 2： 使用 width: fit-content; 进行导航：
刷新前：
刷新后：
所以导航栏的大小保持不变，但主要内容的位置发生了变化。
【问题讨论】：
-
我在 Chromium 89 上有同样的错误，但在 Chrome 89 和 Firefox 86（在 linux 上）没有。这只发生在调整大小按钮上，而不是用鼠标调整大小时。所以这可能只是一个错误。
-
@RomanMkrtchian 谢谢，我也在考虑这是一个错误。只是想知道它存在于 Firefox 和 Chrome 中这样的一个 - 我会说 - 基本示例。让我们看看这里是否至少有人有解决方法的想法。
标签： html css google-chrome firefox css-grid