设置height:500px后CSS Grid容器为何仍纵向增高？

我正在使用配置了grid-auto-flow: column和grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))的CSS Grid布局，已经给容器明确设置了height: 500px的固定高度，但当其中一个网格项包含长文本段落时，容器的高度还是超出了设置的500px。作为CSS Grid新手，我想搞懂这种布局下的行为逻辑，请教原因是什么？

相关代码示例 #

CSS代码 #

.container {
  height: 500px;
  width: 500px;
  margin: 200px auto;
  background-color: black;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.box {
  color: white;
  font-size: 1.5rem;
  text-align: center;
}

body {
  background-color: bisque;
}

HTML代码 #

<body>
<div class="container">
  <div class="box" style="background-color: #e53935">FIRST</div>
  <div class="box" style="background-color: #d81b60">SECOND</div>
  <div class="box" style="background-color: #8e24aa">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ipsa hic nemo veniam voluptate tempore quod et numquam adipisci asperiores cumque optio, incidunt enim odit saepe deleniti accusamus eveniet labore.
  Veniam voluptatibus a laborum nam odit ratione necessitatibus doloribus perferendis hic incidunt? Nulla quam repellendus eveniet necessitatibus, eum, odio vel officiis atque illum perspiciatis id? Totam, perspiciatis voluptatibus? Ducimus, placeat.
  Tenetur, aliquid? Asperiores eligendi alias assumenda, quo dolor porro vero molestias commodi temporibus quis libero deserunt numquam magnam fuga? Quisquam numquam obcaecati officiis expedita nulla reiciendis quia porro maxime sapiente!
  Aliquid voluptatem modi animi omnis culpa similique veniam quas ipsa, sequi porro ea ut maiores quo error repellendus nobis rerum perspiciatis dolorem adipisci totam libero. Modi minus cum ad repudiandae.</div>
  <div class="box" style="background-color: #5e35b1">FOURTH</div>
  <div class="box" style="background-color: #3949ab">FIFTH</div>
  <div class="box" style="background-color: #1e88e5">SIXTH</div>
  <div class="box" style="background-color: #00acc1">SEVENTH</div>
  <div class="box" style="background-color: #00897b">EIGHTH</div>
</div>
</body>

原因解析 #

核心问题出在Grid布局的行轨道默认行为上：

• 你只给容器设置了固定高度，但Grid的行轨道（row tracks）默认值是auto，也就是会完全自适应网格项的内容高度。
• 当某个网格项的内容高度超过容器的500px时，Grid不会强制压缩内容或者限制容器高度，而是会拉伸行轨道的高度，进而把整个容器的高度撑大——因为容器的高度本质上是由内部轨道的总高度决定的，你设置的height:500px只是一个“优先参考值”，当内容放不下时就会失效。
• 另外，grid-auto-flow: column是控制网格项的排列方向（优先列排列），repeat(auto-fit, minmax(150px, 1fr))是控制列的宽度规则，这两个属性都不影响行轨道的高度计算，所以无法阻止容器被纵向撑高。

解决办法 #

如果想让容器保持500px的固定高度，可以通过以下两种方式实现：

方式1：固定行轨道高度，让内容在网格项内滚动 #

给容器添加grid-template-rows: 1fr，让行轨道占满容器的高度，再给网格项添加overflow: auto，超出的内容会在网格项内部显示滚动条：

.container {
  height: 500px;
  width: 500px;
  margin: 200px auto;
  background-color: black;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: 1fr; /* 固定行轨道高度 */
}

.box {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  overflow: auto; /* 内容超出时显示滚动条 */
}

方式2：让容器本身出现滚动条 #

直接给容器添加overflow: auto，这样当内容总高度超过500px时，容器会显示纵向滚动条，自身高度保持不变：

.container {
  height: 500px;
  width: 500px;
  margin: 200px auto;
  background-color: black;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: auto; /* 容器内容超出时显示滚动条 */
}

内容的提问来源于stack exchange，提问作者meallhour