纯CSS实现自适应高度：以黄色框为锚点的蓝色框滚动布局

需求概述 #

• 仅用CSS实现，禁止使用JS
• 蓝色容器高度需与黄色容器完全同步，黄色容器内容动态变化时，蓝色容器高度自动跟随
• 蓝色容器内容过多时自动显示垂直滚动条
• 无法通过设置父容器或蓝色容器的max-height实现，因为黄色容器高度由内容动态决定

解决方案（CSS Grid实现） #

利用CSS Grid的行高自适应特性，直接让蓝色容器继承黄色容器的高度，同时添加滚动逻辑：

<div class="flex min-h-screen items-center justify-center bg-slate-200">
  <div class="grid w-full max-w-xl grid-cols-[1fr_auto] gap-4 bg-white p-4">
    <!-- 蓝色容器：高度同步黄色容器，内容溢出滚动 -->
    <div class="flex flex-col gap-2 h-full overflow-y-auto bg-sky-400 p-4">
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
    </div>
    <!-- 黄色容器：高度由内容动态决定 -->
    <div class="flex flex-col gap-4 bg-yellow-500 p-4">
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
      <div class="bg-black/40 p-4"></div>
    </div>
  </div>
</div>

原理说明 #

1. Grid布局自适应行高：父容器使用grid-cols-[1fr_auto]定义两列，蓝色容器占满剩余宽度，黄色容器自适应内容宽度。Grid的行高会自动由内容最高的子元素（黄色容器）决定。
2. 高度同步：蓝色容器设置h-full，直接继承Grid行的高度（即黄色容器的高度），实现高度实时同步。
3. 溢出滚动：蓝色容器添加overflow-y-auto，当内部内容高度超过黄色容器高度时，自动显示垂直滚动条。

验证说明 #

可在Tailwind Play环境中测试，修改黄色容器的内容数量，蓝色容器高度会自动同步，内容过多时滚动条正常显示。

内容的提问来源于stack exchange，提问作者Bruno M. Silva