Auto-stretch tailwind body to adapt to other div - tailwind-css

Question

I'm using Tailwind CSS in VueJS and I have a little issue with my DIVs. I'm not used to CSS frameworks and I never encountered this problem before.
Problem : https://i.ibb.co/XWbdsxT/screenshot.png
As you can see on this screenshot, the red div goes beyond the bottom of the page (which is normal). I would like the dark-gray one and the light-gray one to strech and follow the red to the very bottom.
I tried :
Add h-full or/and h-screen classes to the gray divs
Add h-full or and h-screen classes to the body and/or html
Add these classes to the main parent div (the one where the grays are wrapped)
It doesn't seem to have any effect. Am I doing this wrong ? Here is the code :
<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>
Please don't pay attention to the fact that this is not responsive. It is not supposed to be.

Answer 1

Try this,
your Dashboard content area needed overflow:hidden. check this doc
<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>
Check on Tailwind Play