我在VueJS中使用Tailwind CSS，我的div有点问题。我不习惯CSS框架，以前从未遇到过这个问题。
问题：https://i.ibb.co/XWbdsxT/screenshot.png正如您在这个屏幕截图中看到的，红色的div超出了页面的底部(这是正常的(。我希望深灰色的和浅灰色的能散开，然后顺着红色一直走到底。
我试过了：
将h-full或/和h-screen类添加到灰色div中将h-full或和h-screen类添加到正文和/或html将这些类添加到主父div(灰色被包裹的div(
它似乎没有任何效果。我做错了吗？这是代码：
<template>
<div class="hello">
<div class="flex flex-row">
<div class="w-1/5 h-screen bg-darkgray"></div>
<div class="w-4/5 h-screen bg-gray-200">
<div class="w-full h-16">
<div>
<div class="bg-white flex items-center shadow-xl">
<input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article">
<div class="p-4 flex flex-column">
<div class="border-r-2 w-16">
<button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/search_icon.png"/>
</button>
</div>
<div class="flex flex-column">
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/notifications.png"/>
</button>
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/user.png"/>
</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="flex flex-row w-11/12 h-16 mt-20 m-auto justify-between">
<p class="text-3xl font-bold">Dashboard</p>
<button class="bg-orange hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button">
<span class="mr-2">+</span> Create an article
</button>
</div>
<div class="flex flex-row w-11/12 h-16 mt-4 m-auto bg-white rounded-t-2xl justify-between">
<div class="ml-6 mt-5">
<a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
</div>
<div class="flex justify-end ml-6 mt-5 mr-6 space-x-4">
<div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
<div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
<div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
</div>
</div>
<div class="flex w-11/12 h-5xl mt-0.5 bg-red-500 m-auto rounded-b-2xl"></div>
</div>
</div>
</div>
</div>
</template>
请不要注意这样一个事实：它没有响应。它不应该是。
试试这个，
您的Dashboard内容区域需要overflow:hidden。检查这份文件
<div class="flex flex-row w-full h-screen">
<div class="w-1/5 max-h-full bg-gray-800 text-white p-6">Sidebar</div>
<div class="flex flex-col w-full max-h-full bg-gray-200">
<div class="flex flex-row w-full bg-white items-center shadow-xl">
<input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article" />
<div class="flex p-4 flex-column">
<div class="border-r-2 w-16">
<button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/search_icon.png" />
</button>
</div>
<div class="flex flex-column">
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/notifications.png" />
</button>
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/user.png" />
</button>
</div>
</div>
</div>
<div class="flex flex-col max-w-full m-6 h-full rounded-b-2xl overflow-hidden">
<div class="flex flex-row w-full my-6 m-auto justify-between">
<p class="text-3xl font-bold">Dashboard</p>
<button class="bg-yellow-500 hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button"><span class="mr-2">+</span> Create an article</button>
</div>
<div class="flex flex-row w-full bg-white rounded-t-2xl justify-between px-6 py-6 h-16">
<a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
<div class="flex justify-end space-x-4">
<div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
<div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
<div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
</div>
</div>
<div class="flex w-full mt-0.5 bg-red-500 rounded-b-2xl max-h-full p-6">Test Doc</div>
</div>
</div>
</div>
检查顺风播放