在可X/Y滚动页面中限制Header宽度为视口宽度减去滚动条宽度

需要实现的核心效果：

• Header 带横向边距，宽度始终为视口宽度减去滚动条宽度再减去两侧边距，不会随下方内容横向扩展
• Body 区域外围有带内边距的边框，内部内容横向扩展时，Body 能自适应宽度
• 页面为全局滚动，Header 不固定，随页面整体滚动

现有方案缺陷：之前用 max-width: calc(100% - 2.5rem) 限制 Header 宽度时，会同时约束 Body 区域，导致其无法跟随大尺寸内容扩展。

解决方案代码 #

CSS #

body {
  margin: 0;
}

.header {
  margin: 1.25rem;
  width: calc(100% - 2.5rem);
  max-width: calc(100vw - 2.5rem);
  height: 50px;
  background-color: orange;
}

.content {
  margin: 1.25rem;
  border: 1px solid black;
  display: inline-block;
  min-width: calc(100% - 2.5rem);
}

.inner {
  background-color: lightblue;
  width: 5000px;
  height: 3000px;
  margin: 1.25rem;
}

HTML #

<div class="header"></div>
<div class="content">
  <div class="inner"></div>
</div>

方案原理 #

• Header 宽度控制：通过 width: calc(100% - 2.5rem) 保证内容未溢出时的基础宽度，再用 max-width: calc(100vw - 2.5rem) 限制最大宽度为视口宽度减边距，确保即使页面出现横向滚动条，Header 也不会超出可视区域。
• Body 自适应：display: inline-block 让 Body 能跟随内部内容宽度扩展，min-width: calc(100% - 2.5rem) 保证内容较小时，宽度与视口匹配，避免出现过窄的情况。

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