CSS实现div宽度匹配同级header 内容溢出时显示滚动条

核心需求 #

• 同级元素div.header与div.body宽度始终保持一致
• div.header最小宽度等于父容器div.wrapper的最小宽度，当浏览器窗口宽度小于header实际宽度时，浏览器窗口层级显示横向滚动条
• 当div.body内部的div.content内容宽度溢出body范围时，div.body自身显示横向滚动条，不能被内容撑开
• 当div.content内容量较小时，div.body自动填满剩余垂直空间

效果参考：

左侧为header宽度完整可见时的效果，右侧为窗口宽度小于header文本宽度时，外层浏览器窗口显示滚动条的效果。

原有代码问题 #

1. div.wrapper未设置纵向弹性布局，div.body上配置的flex-grow: 1没有生效上下文，无法自动填充剩余垂直高度
2. div.body未设置宽度约束，会被内部宽内容直接撑开，无法触发自身的滚动条逻辑

修正后完整代码 #

CSS样式 #

.content {
  background-color: pink;
  margin: 1rem;
  /* 测试body自身滚动可将宽度设置为大于视口的值，例如width: 2000px */
  width: 100px;
}

body {
  margin: 0;
}

.root {
  background-color: yellow;
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.wrapper {
  background-color: lightgray;
  /* 改用inline-flex实现宽度随内容收缩、最小宽度占满父容器的效果，纵向排列子元素 */
  display: inline-flex;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
}

.header {
  background-color: lightgreen;
  white-space: nowrap;
}

.body {
  background-color: lightblue;
  flex-grow: 1;
  /* 强制宽度和父容器（即wrapper，与header同宽）保持一致，避免被内容撑开 */
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: auto;
}

HTML结构 #

<div class="root">
  <div class="wrapper">
    <div class="header">
      header header header header header header header header header header header header
    </div>
    <div class="body">
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>

实现逻辑说明 #

• 外层.root负责窗口级别的横向滚动，当内部wrapper宽度超过视口时自动触发
• 中间.wrapper用inline-flex+纵向布局，既保留了宽度随header内容撑开、最小100%视口宽度的特性，又支持子元素通过flex属性填充高度
• .body设置width:100%保证和header宽度完全一致，超出内容直接在body内部触发滚动，不会撑开外层结构
• flex-grow:1在flex父容器的加持下，会让body自动占满header以下的所有垂直空间，内容量少时也能撑满高度

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