Im using Tabs component.
I need Tab content to be 100% height of parent container and its content should be with scroll (so my tabs selection will not scroll but content will be scrolling inside of each tab).
when I set it 100% height it doesn’t work.
Here is my screenshot:
using not a flex but block for content doesn’t work either
Have you tried setting the ‘Tabs’ element to 100% height as well?
yes and but I cannot make content 100% height even tabs and outside container are…
I’m not sure this is the best method, but I wasted a lot of time previously trying to just get an element to take up the remaining available vertical space.
At the moment I bind the height of the contents to a formula and set overflow to Auto
Example:
"calc(100vh - (115px + 20px))"
For me I use this as 100vh minus (height of content above + footer height) so if i add content above or below I can change it easily.
For your context you could - add the height of; page header + tab header + padding, and subtract from 100vh
wow this works for making 100% of content inside of Tabs container!! HUGE THANKS!!