Height Issue
I am working on web app, and the dashboard should only cover the full viewport of 100vh and 100vw. Preventing the horizontal and vertical scroll.
HTML structure:
LeftContent Structure:
In the leftContent component, the div with pre tag, I add "full-height", and div exceeds 100vh height.
I don't want this. I want the div should cover only the available.
I tried flex-grow but that didn't work either. How to solve this?
HTML structure:
<div className="flex w-full max-h-screen overflow-hidden">
<Sidebar />
<div className="w-full bg-bg">
<Navbar />
<div className="flex justify-between w-full gap-4 mt-8 mb-6">
<LeftContent />
<LabelContent />
</div>
</div>
</div>LeftContent Structure:
<div className="w-full h-full">
<SwitchButton />
<ReadingAnimation reading={reading} />}
<div className="h-full mt-[1.375rem] overflow-auto bg-card" >
<pre>{Content Here}</pre>
</div>
<button>NEXT</button>
</div>In the leftContent component, the div with pre tag, I add "full-height", and div exceeds 100vh height.
I don't want this. I want the div should cover only the available.
I tried flex-grow but that didn't work either. How to solve this?
