CSS嵌套全屏容器内列表可滚动的布局实现问题

你的布局需求是顶部header固定，下方内容容器占满剩余垂直空间；内容容器内标题固定，仅列表区域可滚动。当前代码的问题在于：.content作为flex容器默认min-height: auto，当内部内容高度超出时会被撑开，导致.scrollable-content没有明确的高度限制，overflow-y: auto无法触发滚动；若直接给.content添加滚动属性，标题也会随内容滚动，不符合需求。

解决方法 #

给.content添加overflow: hidden，限制其高度不会被内部内容撑开，确保.inner-content能占据.content的剩余高度，这样.scrollable-content的高度会被约束，内容超出时自动触发滚动。

修改后的完整代码 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: lightgoldenrodyellow;
}

.header {
  background-color: black;
  flex: 0 1 auto;
  color: white;
}

.content {
  flex: 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 800px;
  padding: 1rem;
  margin: 1rem auto;
  overflow: hidden; /* 关键修改：限制.content高度不被内部内容撑开 */
}

.heading {
  flex: 0 1 auto;
}

.inner-content {
  flex: 1;
  display: flex;
}

.scrollable-content {
  overflow-y: auto;
  width: 200px;
  flex-shrink: 0;
}

.scrollable-content ul {
  margin: 0;
  padding: 0;
}

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="header">
    <h1>Foo bar baz</h1>
    <p>Lorem ipsum</p>
  </div>
  <div class="content">
    <h2 class="heading">Lorem Ipsum</h2>
    <div class="inner-content">
      <div class="scrollable-content">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
      <div class="preview">
        <img src="https://images.unsplash.com/photo-1574001412492-7555e61a9b53?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• overflow: hidden作用于.content，确保它的高度严格等于父容器分配的剩余空间，不会因内部内容过高被拉伸。
• .inner-content作为.content的flex子元素，flex:1会自动填满.content减去标题后的剩余高度。
• .scrollable-content的overflow-y: auto此时生效，因为它的高度被.inner-content约束，列表内容超出时会显示滚动条，标题和预览区域保持固定。

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