KP-C

Kevin Powell - Community•2y ago•

3 replies

JaViLuMa

Achieve scrollable content where other content needs to stay in view upon expanding

I didn't know how to word the title since it has limited amount of characters but I will explain bit more here.

I have a container that takes the whole screen height (

100dvh

100dvh

).

In that container I have a footer that's always fixed to the bottom of that container.

Above that footer I have another container that takes rest of the height space of the initial container.

Now that container has drawers (or details elements) that, of course, expand vertically. What I want to achieve is that when, let's say, we have 3 drawers, if I open the second drawer, the first and last drawer are still in view and the content of that second drawer takes up the available height and is scrollable depending if the content inside of it overflows or not.

Attached image shows what I am trying to achieve.

Here I have created a minimal reproducible example, I hope it is enough: https://jsfiddle.net/17x6ec29/83/

I don't mind if it's written in React, JS/TS.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.