【问题标题】:Cannot scroll to last element in content container tailwindcss无法滚动到内容容器 tailwindcss 中的最后一个元素
【发布时间】:2020-06-22 21:21:54
【问题描述】:

我想创建一个应用程序布局,它有一个顶部工具栏,里面有一些 div,

然后是侧边栏和带有顶部导航的内容窗口

我的结构几乎可以工作,但我无法滚动到内容容器的底部。我希望其他一切都得到修复。我已经包含了代码和小提琴。我感觉这与我放在内容容器上的 h-screen 有关,但如果我尝试 h-full 它根本不会滚动。

<div class="h-screen  overflow-hidden" >
    <div class="p-4 bg-yellow-500">
        <div class="h-10 bg-green-500">

        </div>
        <div class="h-10 bg-blue-500">

        </div>
    </div>

    <div class="flex">
        <div class="w-48">
            sidebar
        </div>

        <div class="w-full bg-indigo-500 p-2 ">

            <div class="h-10 bg-orange-500 w-full">
                topnav
            </div>
            <div class=" flex-1 relative z-0 overflow-y-auto   bg-green-500 h-screen">
                content
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3">Last One</div>

            </div>

        </div>
    </div>

</div>

https://jsfiddle.net/sg7aqxv9/5/

【问题讨论】:

    标签: css flexbox tailwind-css


    【解决方案1】:

    您遇到了 flexbox 最小尺寸算法,这导致您的布局溢出。详细解释请看这篇文章:

    您还受到overflow 函数的阻碍,该函数需要固定长度,因此实际上可能会溢出某些内容。看这篇文章:

    考虑到这些因素,您只需将其添加到您的代码中:

    .main-container {
       display: flex;
       flex-direction: column;
       /* overflow: hidden is not necessary */
    }
    
    .secondary-container {
       overflow: auto;
    }
    
    .tertiary-container {
       display: flex;
       flex-direction: column;
    }
    

    revised demo

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2023-04-05
      • 2023-03-18
      • 1970-01-01
      • 1970-01-01
      • 2014-12-14
      • 1970-01-01
      • 2013-06-17
      • 1970-01-01
      相关资源
      最近更新 更多