设置overflow-x-auto的div无法横向滚动问题求助

问题原因 #

你的容器使用了lg:flex布局，而Flexbox默认给子元素设置了flex-shrink: 1——当容器空间不足时，子元素会自动收缩宽度来适配容器，导致即使子元素总宽度超出容器范围，也不会触发overflow-x-auto的横向滚动效果。

解决方案 #

给所有按钮子元素添加flex-shrink-0类，禁止它们自动收缩，这样子元素会保持自身宽度，当总宽度超出容器时，横向滚动就会生效：

<div
  class="hidden lg:flex items-center gap-x-2 overflow-x-auto bg-green-500 p-2 w-full h-full"
>
  <FilterByDomainBtn
    text="Tous"
    className="flex-shrink-0 w-[144px] bg-crina-primary text-white font-gilroy-bold all-projects"
  />
  <FilterByDomainBtn text="Ecologie" className="flex-shrink-0 ecology" />
  <FilterByDomainBtn text="Evènementiel" className="flex-shrink-0 events" />
  <FilterByDomainBtn text="Finance" className="flex-shrink-0 finance" />
  <FilterByDomainBtn text="Immobilier" className="flex-shrink-0 estate" />
  <FilterByDomainBtn text="High-Tech" className="flex-shrink-0 highTech" />
</div>

额外检查点 #

• 确保容器的父元素有明确的宽度约束（你的容器已设置w-full，这部分无问题）；
• 确认容器的h-full不会导致高度塌陷，父元素需要有明确的高度值，否则容器高度异常可能间接影响滚动判断。

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