如何实现同级区块宽度取父容器100%或最宽固定区块宽度的最大值，同时保证内部元素不影响区块宽度且支持横向滚动

这个需求确实有点绕，我之前折腾类似布局的时候也卡了好久——既要让所有垂直排列的区块统一宽度（取父容器100%和最宽固定区块的最大值），又得保证滚动区块里的超长内容只在自己内部滚动，不能把整个父容器撑宽。

先给你说核心思路：用CSS Grid来搞定父容器的宽度计算，它天生能让所有子项对齐到同一列的宽度，同时通过minmax(100%, max-content)来确保容器宽度至少占满父容器，最多适配最宽的固定子项。而且完全不用改你的HTML结构，纯CSS就能实现。

调整后的完整代码 #

* { box-sizing: border-box; }
#main { 
  border: 1px solid red; 
  padding: 5px; 
  /* 核心：用Grid让容器宽度取100%和最宽子项的最大值 */
  display: grid;
  grid-template-columns: minmax(100%, max-content);
}
.section { 
  border: 1px solid lightseagreen; 
  padding: 3px; 
  overflow-x: auto; 
  /* 让每个区块占据Grid的整列，保持垂直排列 */
  grid-column: 1;
}
.spacer { 
  height: 5px; 
  /* spacer也要占整列，维持原垂直结构 */
  grid-column: 1;
}
.item { 
  height: 20px; 
  background: linear-gradient(90deg, red 5%,orange 5% 95%, yellow 95%); 
}
.fill { width: 100%; }
.fill .item { width: 3000px; }
.static { width: 3000px; } /* 可修改这个值测试不同场景 */
.static .item { width: 100%; }

<div id='main'>
  <div class='section fill'>
    <div class='item'></div>
  </div>
  <div class='spacer'></div>
  <div class='section static'>
    <div class='item'></div>
  </div>
</div>

关键部分解释 #

1. 父容器#main的Grid设置：
   display: grid把父容器转为网格容器，grid-template-columns: minmax(100%, max-content)是核心——它让网格列宽至少是父容器的100%，如果有子元素宽度超过100%父宽，就自动适配那个最宽值。所有区块会继承这个列宽，自然实现统一。
2. .section和.spacer的grid-column: 1：
   网格容器默认会把子元素分到不同列，给每个区块和间隔加这个属性，能让它们都占据第一列，完全保留你原本的垂直排列结构。
3. 保留overflow-x: auto：
   这个属性确保区块内部的超长内容（比如.fill里3000px宽的.item）不会撑开区块宽度，因为区块宽度已经由Grid列宽固定，超出部分直接横向滚动即可。

测试两种核心场景 #

• 当.static宽度（比如200px）小于父容器宽度时：所有区块占满100%父宽，.fill内的超长内容可正常横向滚动；
• 当.static宽度（比如3000px）大于父容器宽度时：所有区块自动适配为3000px宽，.fill内的内容依然能横向滚动，不会导致整个页面溢出。

为什么原来的方案没生效？ #

你之前试的min-width: fit-content翻车，是因为它会让#main被内部超长.item直接撑开，导致#main宽度变成3000px，那.fill的100%自然也变成3000px，就不需要滚动了——正好和需求反着来。而Grid方案把区块宽度和内部内容宽度彻底解耦，区块宽度由Grid列宽决定，内部滚动完全不影响容器。

内容来源于stack exchange