I have the following HTML structure that uses Tailwind CSS:
<script src="https://cdn.tailwindcss.com"></script>
<div class="absolute left-0 top-0 bottom-0 right-0 overflow-y-hidden">
<div class="bg-white px-6 py-3">
<div class="flex items-center justify-between">
<h1 class="font-semibold text-xl text-uppercase mt-3">Test title</h1>
<h1 class="font-semibold text-xl text-uppercase mt-3">Test sub title</h1>
</div>
</div>
<form class="h-full">
<div class="overflow-auto h-full">
<table class="table border-separate min-w-full whitespace-nowrap">
<thead class="sticky top-0 bg-gray-300">
<tr>
<th>Customer name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>As you can see in this JSFiddle https://jsfiddle.net/pt95sx2v/, when you scroll down you can’t see all content.
I have been trying to play with h-full class, but it doesn’t seem to fit / resize to the available screen space. What am I doing wrong?
>Solution :
Since you have overflow-y-hidden on the main div container you are not seeing part of its content that gets cropped. The vertical scrollbar you see, belongs to the table container and it’s not related to the parent one.
A quick solution for the table to occupy exactly the space remaining after the very first rendered div and not get cropped by the main parent, could be making the div container a flex layout with:
display: flex;
flex-direction: column;
height: 100vh;
so that you can style the table container adding flex-grow: 1;.
That way the height of the table will fit the remaining available space after the first div and its content will be entirely visible.
Here in this demo I did the minimum amount of modification for your code to work as intended:
/*selector for the main container*/
div.absolute{
display: flex;
flex-direction: column;
height: 100vh;
}
/*selector for the table container*/
form{
flex-grow: 1;
border: solid 2px red;
overflow-y: auto;
}<script src="https://cdn.tailwindcss.com"></script>
<!-- removed overflow-y-hidden -->
<div class="absolute left-0 top-0 bottom-0 right-0">
<div class="bg-white px-6 py-3">
<div class="flex items-center justify-between">
<h1 class="font-semibold text-xl text-uppercase mt-3">Test title</h1>
<h1 class="font-semibold text-xl text-uppercase mt-3">Test sub title</h1>
</div>
</div>
<!-- I didn't remove h-full but it's not needed -->
<form class="h-full">
<div class="overflow-auto h-full">
<table class="table border-separate min-w-full whitespace-nowrap">
<thead class="sticky top-0 bg-gray-300">
<tr>
<th>Customer name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>Sample customer name</td>
</tr>
<tr>
<td>LAST LINE!</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>