如何用TailwindCSS让宽于父元素的子div居中且左右可滚动？

你遇到的问题是因为直接给滚动容器加flex justify-center时，flex容器的滚动范围计算逻辑导致左侧溢出内容无法通过滚动显示。可以通过嵌套一层容器来修复：

• 外层容器保留w-24和overflow-x-scroll，负责提供横向滚动功能
• 新增一层中间容器，设置min-w-full flex justify-center，确保它的宽度和外层容器一致，同时用flex布局让子元素居中
• 给子元素加上flex-shrink-0，避免被flex容器压缩，保持设定的宽度

完整代码示例：

<div class="w-24 overflow-x-scroll">
  <div class="min-w-full flex justify-center">
    <div class="w-48 flex-shrink-0">content</div>
  </div>
</div>

为什么这样有效？中间的min-w-full容器为滚动提供了和外层容器匹配的基准宽度，同时通过justify-center让子元素初始居中。当子元素宽度超过外层容器时，外层容器的横向滚动会覆盖子元素的全部宽度，既能保持初始居中的效果，又能左右滚动查看完整内容。

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