本文介绍一种纯 CSS 方案，通过 flexbox 弹性布局实现容器内仅内容区域可垂直滚动，头部高度自适应、无需固定值或绝对定位，兼容现代浏览器且语义清晰，是解决动态头部滚动布局的经典实践。

在页面布局开发中，经常会遇到这样一种需求：一个容器内部，头部区域固定不动，而内容区域可以自由滚动。常见的做法是给头部设定一个固定高度，或者使用绝对定位将其“脱离”文档流。但问题在于——如果头部内容动态变化，例如多行标题、响应式文本或用户自定义内容，这些方案就会变得脆弱不堪，要么需要 JavaScript 实时计算高度并同步更新，要么维护起来像在走钢丝一样困难。

直接说结论，实现这一场景的最佳实践，是采用 Flexbox 布局 + flex-direction: column + overflow: hidden + flex: 1 的组合方案。这个方案天然支持动态高度的头部，完全不需要预设任何固定数值，也不需要将元素从文档流中“抽离”出来，代码干净、语义清晰，是现代前端开发中处理滚动区域的标准解法。

✅ 推荐解决方案（语义正确、可维护性强）

  
Some text
  

    
Lorem ipsum dolor sit amet...
    
  

.block {
  width: 800px;
  height: 200px; /* 整体容器高度固定 */
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止外层溢出，确保滚动由子元素控制 */
}
.header {
  /* 不设高度，自然撑开；可加 padding/margin */
  flex-shrink: 0; /* 确保头部不被压缩 */
  background-color: #f9f9f9;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.content {
  flex: 1; /* 占据剩余全部空间 */
  overflow-y: auto; /* 仅此处产生滚动条 */
  padding: 12px 16px;
  /* 可选：隐藏滚动条（仅 WebKit） */
  /* &::-webkit-scrollbar { display: none; } */
}