I have the below template created by using TailwindCSS:
<body class="h-full">
<div class="flex h-full">
<div class="w-5/6">
<div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 93.8% 6.2%;">
<div class="relative bg-gray-200 h-full">1</div>
<div class="bg-red-200">
<!-- This area is where I have problems -->
<div class="flex h-full">
<div class="w-1/2 h-full">
<div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
</div>
<div class="w-1/2 h-full">
<div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-1/6">
<div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 20% 80%;">
<div class="md:py-16 md:px-4 border-l border-gray-100 bg-gray-50">3
</div>
<div class="md:py-4 md:px-4 border-l border-t border-gray-100">4</div>
</div>
</div>
</div>
</body>
Please see the following fiddle I have created here.
The problem I have is with these two divs:
<div class="flex h-full">
<div class="w-1/2 h-full">
<div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
</div>
<div class="w-1/2 h-full">
<div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
</div>
</div>
I want to have two links at the bottom (Link #1 and Link #2 in my example), that have a fixed position. Each link's width should occupy 50% of the parent div.
As you can see in the example posted above, the width of the two bottoms <div> exceeds that of the parent (#1).
