让overflow y auto在嵌套的弹性框中工作？

Question

我输给了一个看起来非常简单的布局，我一生都无法弄清楚为什么我看到的行为会发生（即使聊天 gpt 也没有给出有效的解决方案）。

我有一个布局，其中包括顶部菜单、左侧边栏和主容器（像这样分成顶部容器和底部容器）

我的目标是让容器充满“hi”，而不是在填充时将底部栏向下推，而是开始滚动而不移动容器的大小。如果我将文本区域中“hi”的数量加倍，就会出现这样的情况

正如您所看到的，底部栏已经消失，虽然 hi 容器确实滚动，但即使我到达底部，底部栏仍然不可见。

有谁知道我需要做什么来解决这个问题，以便它按照您的预期工作？我在让overflow-y-auto在弹性盒子中工作时遇到了巨大的麻烦，所以我必须对它是如何工作的缺乏一些核心理解。这是顺风游戏的链接，任何想要快速尝试的人都可以查看：

https://play.tailwindcss.com/JAiaaCsR6M

感谢您查看！

Answer 1

考虑通过

min-height: 0

类将

min-h-0

应用到容器元素。这会覆盖父垂直 Flex 布局容器应用的隐式

min-height: min-content

。

<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<div class="w-screen h-screen max-w-full max-h-full overflow-hidden flex flex-col border">
  <div id="top-nav" style="height: 50px" class="flex w-full border items-center justify-center">top nav</div>
  <div class="flex grow min-h-0">
    <div id="sidebar" class="flex basis-1/6 w-full border border-orange items-center justify-center">sidebar</div>
    <div id="content-container" class="flex flex-col basis-5/6 border items-center justify-center overflow-hidden">
      <div class="flex-grow overflow-y-auto w-full" id="scrollable-container">
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        <p>hi</p>
        
        <!-- add more ps here to see it push the bottom bar down -->
      </div>
      <div class="flex basis-1/5 border w-full">bottom bar</div>
    </div>
  </div>
</div>