Can I set a div's height as a percentage based on another divs height that is not the parent?

Hello! Apologies in advance if what I am writing does not make much sense - I am having trouble finding the right words to explain exactly what I mean.

I am building a website and want all of the content to fit within 100VH (so there is no scrolling/it is dynamic). I have a div box at the top of the page that appears with some text inside, but I have made it able to be expanded to show more text using Interactions. The height of this div is set to auto, and when this text box is expanded it obviously changes height (but still remains auto). To explain what I mean later, I’ll call this “Div 1”.

I am also trying to put a div box underneath this text box, “Div 2”, and I want the height to fill up the rest of the height of the body that Div 1 does not fill up. Basically, I want the height of Div 1 and the height of Div 2 to add up to 100 VH. I know I could easily do this by setting Div 1 at, for example, 30% and then Div 2 at 70% - but my problem is that the height of Div 1 changes when it is expanded to show more text.

Does anybody know of a way around this? Unfortunately, the website I am working on is confidential so I am not able to show a Read-Only link. Thanks!

Use flexbox for your the div that contains both divs your mentioning and make ‘Div2’ to expand that way it’ll fill the rest of the space and only when there’s space available:

1 Like