css 让overflow y auto在嵌套的flex box中工作

6yjfywim 于 5个月前发布在其他

关注(0)|答案(1)|浏览(92)

我输给了一个看起来很简单的布局，对于我的生活，我不知道为什么我看到的行为正在发生（甚至聊天GPT还没有给出有效的解决方案）。
我有一个布局，其中包括一个顶部菜单，一个左侧栏，和一个主容器（这是分为一个顶部容器和底部容器一样）

的数据
我的目标是让填充了“hi”的容器在填充时不向下推动底部栏，而是开始滚动而不移动容器的大小。

的
正如您所看到的，底部栏已经消失了，当我到达底部时，hi容器确实滚动了，但底部栏仍然不可见。
有没有人知道我需要做些什么来修复这个问题，使它像我期望的那样工作？我遇到了巨大的麻烦，让overflow-y-auto在flex盒中工作，所以我必须缺乏一些核心的理解，这一切是如何工作的。这里是一个链接到Tailwind Play，所以任何人谁想要快速给予一个尝试可以看看：
https://play.tailwindcss.com/JAiaaCsR6M
感谢您发送编修。

css

来源：https://stackoverflow.com/questions/77766981/getting-overflow-y-auto-to-work-within-nested-flex-boxes

1条答案

按热度按时间

dkqlctbz1#

考虑通过min-h-0类将min-height: 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>

字符串

赞(0）回复(0）举报 5个月前

我来回答

css 让overflow y auto在嵌套的flex box中工作

1条答案

相关问题

热门标签

最新问答