Keep tethered element in viewport

[firasdib]

I have a menu that can sometimes grow very tall in my single page application. I would like to limit the height of this menu to that of the available space in the viewport, so that elements don't fall out of reach and the user can scroll inside the menu. How could one achieve something like this?

Whats required (technically) is setting max-height: calc(100vh - translateY) but I don't know how to most efficiently go about doing this.

Thanks!

[yairEO]

setting max-height: calc(100vh - translateY) is of course not allowed. can you please create a demo page in jsbin (or somewhere else) with a minimal reconstruction of the scenario?

[firasdib]

@yairEO No, it was just meant as pesudo-code. What I ended up going was waiting until the element was rendered and grab clientBoundingRect and add a max-height: calc(100vh - rect.top).

I don't have an example right now, but basically, an absolutely positioned element that expands with its children. When it expands beyond the viewport it should be restricted.

[firasdib]

@yairEO Any progress on this?

[RobbieTheWagner]

I am not sure I understand the issue here. @firasdib wouldn't setting the max-height work?

[firasdib]

@rwwagner90 Sorry for getting back to late. I don't recall myself, but this was for an issue I had on regex101 when building it.

I believe the issue is/was when you tether an element to a specific position and that element then grows taller than the current viewport. I wanted to restrict that element to not be allowed to grow taller than the active viewport.

[RobbieTheWagner]

Ah, I see. I think that is out of scope at this time.