实现内容自适应宽度的横向滚动Flex容器问题求助

我明白你遇到的问题了——你的横向滚动flex容器里的子项没有保持自身内容的宽度，反而被挤压变形，导致滚动体验不符合预期。其实这是Flex布局的默认行为在搞鬼，咱们只需要简单调整就能解决。

核心问题原因 #

默认情况下，Flex子项的flex-shrink属性值为1，这意味着当容器空间不足时，子项会自动收缩来适应容器宽度。这就是为什么你的子项被挤在一起，没有保持内容宽度的原因。

解决方案 #

我们只需要阻止子项收缩，同时确保容器的横向滚动设置正确：

• 你已经给容器加了flex-nowrap类（对应flex-wrap: nowrap），这个是对的，确保子项不会换行
• 给每个Flex子项添加flex-shrink: 0，阻止它们被挤压，这样子项就会保持自身内容的宽度
• 容器的overflow-x: auto和height设置已经没问题，确保超出部分可以横向滚动

修改后的代码 #

CSS 部分

.workflow_container {
  height: 200px;
  overflow-y: hidden;
  overflow-x: auto;
}
/* 自定义类阻止子项收缩 */
.flex-item-no-shrink {
  flex-shrink: 0;
}

或者你可以直接用Bootstrap内置的flex-shrink-0类，不用自定义CSS，更贴合Bootstrap的使用方式。

HTML 部分

给每个纵向排列的Flex子项添加flex-shrink-0类：

<div class="container">
  <div class="d-flex flex-nowrap workflow_container">
    <div class="d-flex flex-column bd-highlight mb-3 flex-shrink-0">
      <div class="p-2 bd-highlight">Flex item 1</div>
      <div class="p-2 bd-highlight">Flex item 2</div>
      <div class="p-2 bd-highlight">Flex item 3</div>
    </div>
    <div class="d-flex flex-column bd-highlight mb-3 flex-shrink-0">
      <div class="p-2 bd-highlight">Flex item 1</div>
      <div class="p-2 bd-highlight">Flex item 2</div>
      <div class="p-2 bd-highlight">Flex item 3</div>
    </div>
    <!-- 其余所有子项都添加flex-shrink-0类即可 -->
  </div>
</div>

这样修改后，所有子项都会保持自身内容的宽度，当总宽度超出容器时，横向滚动条会正常出现，你可以滚动查看全部内容。

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