无法滚动到内容容器中的最后一个元素

Question

我想要创建一个应用程序布局，其中有一个顶部工具栏，其中包含一个div，

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

​

​

我已经使结构几乎正常工作，但我不能滚动到内容容器的底部。我希望其他一切都能修好。我把密码和小提琴都包括进去了。我有一种感觉，这与我在内容容器上设置的h屏幕有关，但如果我尝试了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/

Answer 1

您遇到的是柔性盒最小大小调整算法，该算法导致布局溢出。有关详细说明，请参阅本文：

• 为什么不缩小flex项目的内容大小？

您还受到overflow函数的阻碍，它需要固定的长度，因此实际上会溢出某些内容。见这篇文章：

• 带有视口高度和内滚动div的网格

考虑到这些因素，只需将其添加到代码中：

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

.secondary-container {
   overflow: auto;
}

.tertiary-container {
   display: flex;
   flex-direction: column;
}

修订后的演示