My interface contains a <div id=content>
element with a large number of elements. When the list extends beyond the height of the screen, a scrollbar should appear within the list. The element is set to fill the remaining height space in the right column using flex-grow. Everything works perfectly until the list elements overflow the screen, causing the entire tag and the screen to overflow as well.
Despite setting the max-height
property of the body to 100vh
, the <div id=content>
element overflows in height beyond the body element, which seems incorrect to me.
For a code example, you can check out my Codepen: Codepen
I am looking for a solution to adjust the code so that the element displays scrollbars on the y-axis when there are many elements.