响应式div容器内X轴滚动异常问题求助

问题出在你给section设置的inline-flex上——这个display属性会让元素宽度由内部内容决定，哪怕加了w-full和max-w-full也没用，容器会直接被2000px宽的子元素撑满，自然触发不了overflow-x:auto。

解决方法很简单，把section的inline-flex改成flex：

<div className="w-full">
  <section className="flex w-full flex-col gap-2 overflow-x-auto border max-w-full">
    <div className="w-[2000px] h-11 inline-flex bg-black"></div>
  </section>
</div>

改成flex后，section会以块级元素的形式占满父容器宽度，当子元素宽度超出容器范围时，就会自动显示横向滚动条了。

内容的提问来源于stack exchange，提问作者Juancho Plass Cedillo