Tailwind 柔性容器在 X 轴上未显示溢出，为什么？

Question

我对这段代码的工作方式有点困惑。我是顺风的新手，我不知道我是否遗漏了一些重要的东西，但是一个简单的代码假装在 div 内水平显示几个元素，并假装在 X 和 Y 轴上生成溢出，似乎只在 Y 轴上工作，我不明白为什么。我在 vanilla HTML/CSS 中尝试过，它按预期工作，但在 TailwindCSS 中却不行。

任何人都可以在 Tailwind Playground (https://play.tailwindcss.com/) 中尝试一下，只需粘贴代码，你就会看到溢出只出现在 Y 轴上，但不会像我那样同时出现在两个轴上想要。如有任何帮助，我们将不胜感激。

<div class="flex h-[400px] w-[1000px] gap-24 overflow-auto">
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
</div>

Answer 1

你可以玩弄长度和宽度来找出溢出-x和溢出-y

<div class="flex h-[400px] w-[1000px] gap-24 overflow-auto">
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
</div>

如果您对溢出感到困惑，您可以阅读以下内容：

溢出-y

溢出-x

Answer 2

此代码将按照您的要求工作。

<div class="h-[400px] overflow-y-auto">
 <div class="flex w-[1000px] gap-24 overflow-x-auto">
   <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
   <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
   <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
   <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
   <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
   <div class="h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
 </div>
</div>