CSS Grid Item高度塌陷问题：如何不设固定高度实现文本可读？

问题场景 #

现有以下CSS代码：

body {
  height: 100%;
}
.container {
  position: absolute;
  border: 1px dashed red;
  left: 10px;
  top: 10px;
  height: 400px;
  width: 400px;
  display: grid;
  overflow: auto;
}
.vrt-text {
  border: 1px dotted blue;
  overflow: auto;
  display: flex;
  justify-content: flex-end;
}

p {
  font-family: Georgia, serif;
  font-size: 18px;
}
   
.vertical-rl {
  writing-mode: vertical-rl;
  color: #0074d9;
  margin: 0 6px;
}

对应HTML结构：

<div class="container" style="top: 450px">
  <p>Text 1</p>
  <div class="vrt-text">
    <p class="vertical-rl">Text 2</p>
  </div>
  <p>Text 3</p>
  <p>Text 4</p>
  <p>Text 5</p>
  <p>Text 6</p>
  <div class="vrt-text">
    <p class="vertical-rl">Text 7</p>
    <p class="vertical-rl">Text 8</p>
  </div>
  <p>Text 9</p>
  <div class="vrt-text">
    <p class="vertical-rl">Text 10</p>
  </div>
  <p>Text 11</p>
  <div class="vrt-text">
    <p class="vertical-rl">Text 12</p>
    <p class="vertical-rl">Text 13</p>
    <p class="vertical-rl">Text 14</p>
    <p class="vertical-rl">Text 15</p>
  </div>
  <p>Text 16</p>
</div>

遇到的问题：.vrt-text容器高度塌陷为0，内部竖排文本无法正常显示，但外部的<p>元素高度正常。推测是垂直空间不足时竖排文本换行，但Flex容器没有被内容撑开的机制，导致高度塌陷。需求是保留.vrt-text的display:flex（实现多个竖排文本并排），且不设置固定高度，让所有文本可读。

解决方案 #

方法1：让Flex容器高度由内容决定 #

给.vrt-text添加align-self: start;，这样它作为Grid子项不会被强制拉伸，高度完全由内部内容撑开：

.vrt-text {
  border: 1px dotted blue;
  overflow: auto;
  display: flex;
  justify-content: flex-end;
  align-self: start; /* 新增：取消Grid子项的拉伸行为 */
}

方法2：确保容器最小高度适配内容 #

如果希望Grid子项仍然保持拉伸，但避免内容塌陷，可以添加min-height: min-content;，让容器至少能容纳内容的最小高度：

.vrt-text {
  border: 1px dotted blue;
  overflow: auto;
  display: flex;
  justify-content: flex-end;
  min-height: min-content; /* 新增：设置最小高度为内容所需高度 */
}

额外优化：避免竖排文本不必要换行 #

如果不想让竖排文本因为空间不足自动换行，可以给.vertical-rl添加white-space: nowrap;，保证文本完整显示：

.vertical-rl {
  writing-mode: vertical-rl;
  color: #0074d9;
  margin: 0 6px;
  white-space: nowrap; /* 新增：禁止文本换行 */
}

以上修改既保留了Flex布局实现的多竖排文本并排效果，又解决了高度塌陷问题，所有文本都能正常可读，且无需设置固定高度。

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