CSS 网格项目高度折叠

Question

有了这个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>

div.vrt-text 的高度折叠为 0，但不在 div.vrt-text 内的 p 元素保持其高度：

我认为发生的情况是，随着垂直空间变小，div.vrt-text 中的垂直文本会换行（这很好），但没有什么可以阻止高度塌陷到 0。

我需要显示.vrt-text：flex，这样我就可以有多个垂直文本项目彼此相邻，而不是一个一个地放在另一个项目下。

如何在不为项目设置特定高度/尺寸的情况下让所有文本可读？

Answer 1

为什么需要

overflow: auto

来代替

.vrt-text

？如果我将其移除，它可以防止塌陷到高度 0。

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 {
  color: #0074d9;
  margin: 0 6px;
}

<div class="container" style="top: 0px">
  <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>