Make everything static, except one container scrollable!?

[unlustucru]

My page consists of a main container (“section”), containing 3 subcontainers (“left”, “center”, and “right”).

I want the “center” and “right” container to stay static (not scrollable). These containers automatically fill the available height.

I’d like to set up scroll on the one container that overflows the visible height, “left”. Actually, it would more precisely the “unit” container that would scroll. Ideally the “course_card” element wouldn’t move.

In comparison with the previous picture, this is the desired result:

I’ve tried 100 things to achieve this, without success…

I’m not familiar with the underlying logic that would allow me to do this. Can anyone help?

[jptrinh]

Hey @unlustucru !

• Section need to have a fixed width. You can set the height to fill the screen by binding its height property to calc(100vh - 100px) — 100px being the height of your header_container.
• Set the height of the subcontainers to 100%. Your page should not be able to scroll now.
• Set the overflow of your left subcontainer to auto. If the unit div is long enough, you should be able to scroll the left div (a scrollbar appear for that div)
• You can set the position of the course_card to sticky and adjusting the top value. This way this div will stick to the top of the left div.

I hope this was clear enough. If not, I can make a quick video out of it

[unlustucru]

Amazing thanks a lot!