CSS实现蓝色容器随绿色容器自适应高度并保留最小高度与滚动条

核心需求回顾 #

• 蓝色容器最小高度400px，内容超出时显示垂直滚动条
• 当绿色容器高度 > 红色+蓝色容器总高度时，蓝色容器自动增高，使红+蓝总高度与绿色容器高度一致
• 蓝色容器仅在绿色容器更高时才增高，内容过多时不额外增高，仅显示滚动条

问题分析 #

你之前的Grid布局使用grid-template-rows: auto 1fr，会强制蓝色容器占满剩余行高，导致无法回到400px的最小高度，且内容过多时不会触发滚动（因为容器被拉伸适配内容）。

纯CSS解决方案 #

通过调整Grid布局结构，结合minmax()和Grid跨行列特性，实现所有需求：

修改后的代码 #

<style>
  .content {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 左侧1列，右侧绿色占2列，对应原3列布局比例 */
    grid-template-rows: auto minmax(400px, auto); /* 红色行自适应高度，蓝色行最小400px */
    grid-template-areas:
      "red green"
      "blue green";
    gap: 1rem; /* 可选，添加容器间间距 */
  }

  .red {
    grid-area: red;
    background-color: lightsalmon;
  }

  .blue {
    grid-area: blue;
    background-color: lightblue;
    min-height: 400px;
    overflow-y: auto; /* 内容超出时显示滚动条 */
    /* 确保容器高度不随内容无限增高，优先触发滚动 */
    max-height: max-content;
  }

  .green {
    grid-area: green;
    background-color: lightgreen;
    aspect-ratio: 2/1; /* 示例比例，替换为实际内容即可 */
    grid-row: 1 / -1; /* 让绿色容器跨两行，强制左侧总高度与绿色对齐 */
  }
</style>

<div class="content">
  <div class="red">variable content</div>
  <div class="blue">
    <div>min-height 400px</div>
    <div>auto scrollbar</div>
    <div>auto grow if image is taller</div>
    <div>line</div>
    <div>...</div>
  </div>
  <div class="green">image</div>
</div>

原理说明 #

1. Grid布局结构：绿色容器通过grid-row: 1 / -1跨两行，强制Grid容器的行总高度与绿色容器高度一致
2. 蓝色容器高度控制：
   • min-height: 400px保证最小高度
   • 当绿色容器高度大于红色+400px时，Grid会自动拉伸蓝色容器高度，使左侧总高度匹配绿色容器
   • overflow-y: auto在内容超出容器当前高度时触发滚动，不会让容器随内容无限增高
3. 红色容器自适应：红色容器高度由自身内容决定，不影响蓝色容器的最小高度规则

兼容性说明 #

该方案基于标准Grid布局特性，兼容所有现代浏览器（Chrome、Firefox、Safari 10.1+、Edge），无需额外JavaScript。

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