I am struggling to achieve a demanded effect. I have a following code structure:
<div className="font-sans h-screen overflow-auto">
<>
<div className="flex justify-center items-center w-full flex-col">
<div className="flex w-full">
<div className="sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
<div className="mx-auto px-4">
<div className="flex justify-between h-16 items-center">
<div className="flex items-center justify-start">
{OBJECT1}
<div
className="flex md:hidden sm:hidden text-sm text-inflowGray items-center cursor-pointer w-50"
onClick={() => {
window.history.back();
}}
>
<icons.ChevronLeft className="text-inflowGray w-4 h-4 mr-2 sm:mr-2.5" />
Back
</div>
</div>
</div>
</div>
</div>
<div className="w-full bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
<div className="flex items-center justify-center bg-white">
{SOME OBJECT2}
</div>
</div>
</div>
</div>
<div className="h-full flex flex-wrap">
<div className="w-full lg:w-1/2 sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
{OBJECT3}
</div>
<div className="w-full lg:w-1/2 bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
{OBJECT4}
</div>
</div>
</>
</div>
No I want it to present itself as in the image attached. However, whenever I add h-full, min-h-screen or anything of this sort to which contains Object 3 and Object 4, they go overflow. I want to keep them within screen. Simply, I want Obj3 and Obj4 containing div to fill the remaining viewport below the previous div with Objct 1 and Objct2. How to achieve it? I have been trying the options I have mentioned and they seem not to be working. 
2
Answers
If you want to keep using flexbox, you won’t be able to achieve exactly the outcome you want (i.e. divided precisely in the middle, like columns), as the elements inside a flex container will adjust according to their content. You can achieve something like this…
…with this code:
If you want them divided in columns, you need to use grid…
…like this:
Try this my friend:
Explanation
If you try to set the second row height full screen the whole height would be 1st row height + screen height. Which is more than screen height.
You should have three flex (one for container and two for rows) which you have.
Make the container full height and a flex with direction column.
Then two inner flex is rows which you done right. Just second row will be flex-1 instead of screen-h to grow to remaining space instead of specific height.
That’s it.