如何在不修改flex-grow父容器样式的前提下，限制子元素高度不超出父容器并支持内部滚动？

没问题，我刚好遇到过类似的场景！你的核心困扰其实来自flex布局的一个默认行为——flex容器的子元素默认会继承min-height: auto属性，这就导致当子元素内容过多时，它会直接撑大父容器，而不是乖乖待在父容器的范围内。好在我们完全不用改动父容器的样式，只需要给目标子容器加几行样式就能解决问题。

具体解决方案 #

给你注释里标注的那个需要限制的子容器（就是写着“I'd like this container to fill the screen, but not grow outside”的元素）添加以下样式：

height: 100%;
min-height: 0; /* 最关键的一行：打破flex子元素默认的min-height:auto，阻止内容撑大父容器 */
overflow-y: auto; /* 内容超出时自动显示垂直滚动条 */
max-height: 100%; /* 双重保险，确保容器不会超出父容器高度 */

如果用Tailwind CSS的话，直接用对应的类就可以：

<div class="h-full min-h-0 overflow-y-auto max-h-full">
  <!-- 你的内容放在这里 -->
</div>

为什么这些样式能生效？ #

• height: 100%：让子容器完全继承父容器的可用高度，确保它能填满父容器的空间；
• min-height: 0：这是解决问题的核心！flex布局中，子元素默认的min-height: auto会让它跟着内容高度“自由生长”，哪怕超出父容器，这行样式就能强制子容器遵守父容器的高度限制；
• overflow-y: auto：当内容真的超出容器高度时，自动提供内部滚动能力，不会破坏整体布局；
• max-height: 100%：作为双重保险，彻底杜绝容器超出父容器的可能性。

结合你的结构的完整示例 #

<div class="relative isolate flex min-h-svh w-full flex-col">
  <main class="flex flex-1 flex-col">
    <div class="grow flex flex-row justify-items-stretch">
      <div class="max-w-7xl grow flex lg:flex-row lg:justify-items-stretch flex-col justify-items-stretch">
        <div class="grow flex flex-col justify-center items-center">
          <!-- Marked container -->
          <div class="flex min-w-300 max-h-full">
            <!-- 目标容器：添加了限制样式 -->
            <div class="h-full min-h-0 overflow-y-auto max-h-full">
              <!-- 这里放你的内容，哪怕超长也只会内部滚动 -->
              <p>测试内容...</p>
              <p>测试内容...</p>
              <!-- 可以多复制几行内容测试滚动效果 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

小提醒：如果你的目标容器本身也是flex容器，记得同样给它加上min-height: 0，不然它的子元素还是可能撑大它，原理是一样的哦！

内容来源于stack exchange