如何约束flex容器高度与父容器一致，实现指定区域滚动？

组件库提供的Modal组件自带可滚动的内容区（.inner-content），现在需要在这个区域内添加固定的content-header和可滚动的content-main，要求content-header始终停在Modal内容区顶部，只有content-main滚动，同时原来的.inner-content不再滚动。但之前的尝试没成功：.inner-content还在滚动，content-main反而无法滚动，而且我们只能修改.inner-content内部的HTML和CSS，不能改动Modal本身的代码。

解决方法 #

核心思路是把滚动逻辑从父容器转移到子内容区，同时用flex布局分配固定头部和滚动内容的空间：

• 关闭.inner-content的滚动，避免它抢滚动行为
• 让content-container占满父容器的全部高度
• 给content-main设置自动滚动属性，确保它能获取到头部之外的剩余高度

修改后的代码如下：

CSS 代码

/* 仅修改inner-content内部的样式 */
.inner-content {
  overflow-y: hidden; /* 关闭父容器的滚动 */
  height: 100%;
}

.content-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* 解决flex子项高度溢出问题 */
}

.content-header {
  flex-shrink: 0; /* 固定头部高度，不被压缩 */
  background-color: rgba(0, 0, 255, 0.2);
  padding-block: 20px;
}

.content-main {
  flex: 1; /* 占据剩余全部高度 */
  overflow-y: auto; /* 内容过长时自动滚动 */
  min-height: 0; /* 确保即使内容为空也能正确收缩 */
}

HTML 代码

<div class="inner-content">
  <div class="content-container">
    <div class="content-header">
      Main header
    </div>
    <div class="content-main">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
      one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply random text.
      It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
      Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
      from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
      word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
      a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
      looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply
      random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,
      from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
      from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
      word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
      a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
      looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply
      random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,
      from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
      from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
      word in classical literature, discovered the undoubtable source. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
      a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
    </div>
  </div>
</div>

关键说明 #

1. 关闭父容器滚动：把.inner-content的overflow-y改成hidden，避免它的滚动行为干扰子区域
2. 容器占满高度：给content-container设置height:100%和flex布局，让它和父容器高度完全匹配
3. 内容区自动分配空间：用flex:1让content-main自动占据头部之外的所有高度，配合overflow-y:auto实现滚动
4. 解决flex溢出问题：添加min-height:0确保flex子项在内容溢出时能正确收缩，保证滚动逻辑正常生效

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