I am in the process of developing a simple web application that features a sidebar whose vertical size is dependent on the number of elements it contains.
My goal is to make the web app responsive, ensuring it works well on devices of any size.
In cases where the user reduces the viewport vertically and some elements within the sidebar exceed the viewport boundaries, my objective is for the sidebar to shrink instead of overflowing the viewport. This would allow users to scroll through its contents.
The height of the sidebar is not fixed (e.g., 50% or 700px) as it varies based on the number of elements within it (which could be anywhere from 3 to 30).
To help illustrate what I am trying to achieve, you can refer to the image below:
White: represents the viewport
Light Blue: represents the sidebar
Dark Blue: symbolizes the elements within the sidebar
Grey: indicates the presence of the scrollbar
I have managed to implement this functionality successfully when the sidebar has a predefined height using overflow: auto. However, I am facing challenges in achieving the same outcome when the height of the sidebar isn't defined, allowing the child elements to determine its height.
Any assistance on this matter would be highly appreciated!