无法滚动到内容容器tailwindcss中的最后一个元素
我想创建一个应用程序布局,它有一个顶部工具栏,其中有一个div 然后是一个侧栏和一个带有顶部导航的内容窗口 我已经使结构几乎正常工作,但我无法滚动到内容容器的底部。我想把其他的都修好。我已经包括了代码和一把小提琴。我有一种感觉,这与我放在内容容器上的h屏幕有关,但如果我尝试h-full,它根本不会滚动无法滚动到内容容器tailwindcss中的最后一个元素,css,flexbox,tailwind-css,Css,Flexbox,Tailwind Css,我想创建一个应用程序布局,它有一个顶部工具栏,其中有一个div 然后是一个侧栏和一个带有顶部导航的内容窗口 我已经使结构几乎正常工作,但我无法滚动到内容容器的底部。我想把其他的都修好。我已经包括了代码和一把小提琴。我有一种感觉,这与我放在内容容器上的h屏幕有关,但如果我尝试h-full,它根本不会滚动 <div class="h-screen overflow-hidden" > <div class="p-4 bg-yellow-500">
<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>
边栏
顶置导航
内容
最后一个
您遇到了flexbox最小尺寸算法,这会导致布局溢出。有关详细说明,请参阅本帖:
溢出
函数的阻碍,该函数需要固定的长度,因此实际上可能会溢出某些内容。见此帖:
.main-container {
display: flex;
flex-direction: column;
/* overflow: hidden is not necessary */
}
.secondary-container {
overflow: auto;
}
.tertiary-container {
display: flex;
flex-direction: column;
}