Flex容器内超宽子元素如何设置水平滚动？

你遇到的问题核心是flex容器默认会自动收缩子元素，导致你设置的width:4000px无法生效，进而overflow:auto触发不了滚动。要实现固定宽度子元素+可水平滚动宽子元素的布局，按以下方式修改即可：

修改思路 #

1. 给固定宽度的sizeSmall元素添加flex-shrink: 0，避免它被flex容器压缩。
2. 给需要滚动的overflow元素套一个外层容器（比如scroll-container），让这个容器占据flex容器的剩余空间，并开启水平滚动。
3. 给overflow元素添加flex-shrink: 0，确保它的设置宽度不会被压缩，从而触发外层容器的滚动。

修改后的完整代码 #

CSS #

html, body{
   padding: 0;
   margin: 0;
}

.container{
   display: flex;
   background: yellow;
   width: 100%;
   height: 100px;
   max-width: 100%;
}

.container div{
  border: 1px solid red;
}

.sizeSmall{
  width: 200px;
  flex-shrink: 0; /* 固定宽度，不被压缩 */
}

.scroll-container{
  flex: 1; /* 占据容器剩余全部宽度 */
  overflow-x: auto; /* 内容超出时显示水平滚动条 */
}

.overflow{
  width: 4000px;
  height: 100%; /* 填满父容器高度 */
  flex-shrink: 0; /* 保持设置的宽度，不被压缩 */
}

HTML #

<div class="container">
 <div class="sizeSmall"></div>
 <div class="scroll-container">
   <div class="overflow"></div>
 </div>
</div>

额外说明 #

如果不想新增外层容器，也可以直接让overflow元素内部的内容（而非元素本身）超出宽度，此时只需修改overflow的样式：

.overflow{
  flex: 1;
  overflow-x: auto;
}
/* 然后在.overflow内部添加一个宽4000px的子元素 */

但这种方式更适合内容动态生成的场景，固定元素宽度的话，用外层容器的方案更直观。

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