尾风溢出问题

Question

我正在尝试用顺风创建一个像应用程序一样的聊天程序，而且我似乎无法使溢出正常工作。

而不是溢出，它只是延伸的盒子，以适应所有的内容。请看下面的代码片段或链接，在第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.tailwindcss链接

Answer 1

您只需在第20行中添加“溢出隐藏”即可。

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

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

如果您将第28行中的“溢出-y-滚动”更改为“溢出-y-自动”，则如果消息高度不超过其父div，则不会出现滚动条。

Answer 2

我正在设法解决你的问题。你可以检查这里