Tailwind 的溢出问题

Question

我正在尝试使用顺风创建一个类似聊天的应用程序，但我似乎无法正常运行。

而不是溢出，它只是拉伸盒子以适应所有内容。 请看下面的代码 sn-p 或链接，第 25 行是容器开始的地方，顶部容器应该跨越 5/6 网格行，并且只有当内容超过容器时才会溢出！

<div class="grid h-screen w-screen grid-rows-6 gap-2 bg-neutral-900 p-1">
  <div class="row-span-1 bg-neutral-800">
    <div class="h-full w-full p-1">
      <div class="mt-5">
        <div class="flex flex-wrap justify-between px-5 w-full text-white">
          <div>Com</div>
          <div>3dub</div>
          <div>Prof</div>
        </div>
      </div>
    </div>
  </div>
    <div class="row-span-5 bg-neutral-800 p-1">
      <div class="grid grid-cols-6 w-full h-full gap-1 p-1">
        <div class="col-span-1 h-full">
          <div class="h-full w-full p-1 bg-neutral-700">
            <div class="text-white">Nodes</div>
          </div>
        </div>
          <div class="col-span-5 h-full">
            <div class="h-full w-full p-1 bg-neutral-700">
              <div class="h-full w-full rounded-lg bg-neutral-600 p-4">
                <div class="h-full w-full">
                  <div class="grid grid-rows-6 h-full w-full gap-y-1">

                    <div class="row-span-5 w-full rounded-lg bg-neutral-500">
                      <div class="h-full w-full min-h-0 rounded-lg bg-neutral-500 p-4">
                        <div class="flex flex-col h-full w-full overflow-y-scroll gap-y-2">
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                          <div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
                        </div>
                      </div>
                    </div>

                    <div class="row-span-1 w-full rounded-lg bg-neutral-500">
                      <div>Message</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://play.tailwindcss.com/2G6f2owRqQ

编辑：包含错误的 play.tai​​lwindcss 链接

Answer 1

您可以将“溢出隐藏”添加到第 20 行。

在第 20 行，您的代码必须如下所示：

<div class="col-span-5 h-full overflow-hidden">