flex容器动态添加div左侧截断无法左滚的CSS解决方案

左侧内容被截断、仅支持向右滚动是flex布局搭配滚动容器时的典型问题，核心诱因有两点：

• 作为滚动容器的.shift-selection-container设置了justify-content: space-evenly，该分散对齐属性仅在内容总宽度小于容器宽度时生效，一旦内容溢出，均匀分配的左右边距会将最左侧的子元素推出容器可视边界，导致滚动条无法定位到最左侧的内容位置。
• 容器内的flex子项.shift-selection-button-wrapper设置了固定width: 50%，且默认flex-shrink: 1的收缩规则在子项数量增多、总宽度超出容器时，会和固定宽度规则冲突，进一步挤压左侧内容的显示空间。

只需要调整两处CSS规则即可实现正常滚动、内容不截断的效果：

1. 修改滚动容器的对齐方式，移除不适合溢出场景的分散对齐，改用固定间距控制子项间隔
2. 调整子项的宽度规则，禁止子项被自动压缩，让宽度适配自身内容

修改后的核心CSS代码如下：

.shift-selection-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  /* 替换原来的space-evenly，左对齐适配滚动场景 */
  justify-content: flex-start;
  /* 用gap控制子项间距，可根据设计需求调整数值 */
  gap: 20px;
  margin-top: var(--height-header-line);
  /* 替换scroll为auto，内容不溢出时不显示多余滚动条 */
  overflow: auto;
  /* 若不需要纵向滚动可追加 overflow-y: hidden; */
}

.shift-selection-button-wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 100%;
  /* 移除原固定width:50%，设置子项不收缩、基础宽度适配内容 */
  flex: 0 0 auto;
  width: fit-content;
  /* 强制子项宽度适配内容最小宽度，避免内部按钮被挤压 */
  min-width: max-content;
  /* 可选：追加左右内边距避免内容贴边 */
  padding: 0 6px;
}

调整后无论动态添加多少个子项，元素都会从左到右依次排列，总宽度超出容器时会正常触发横向滚动，滚动条可以滑动到左右两侧边界，所有内容都不会被截断。如果需要调整子项之间的间隔，只需要修改容器的gap属性值即可，注意不要在可滚动的flex容器上使用space-evenly、space-between、space-around这类分散对齐属性，这类属性仅适配内容不溢出的场景。

内容的提问来源于stack exchange，提问作者four-eyes