I'm currently working on a project that aims to replicate the functionality demonstrated in this code snippet:
.overall-container {
height: screen;
border: 1px solid black;
padding: 2px;
}
.scroll-menu {
overflow-y: auto;
border: 1px solid blue;
padding: 2px;
height: 100px; // this should be the rest of the screen height
}<div class="overall-container">
<div>
Header
</div>
<div class="scroll-menu">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
<div>Element 4</div>
<div>Element 5</div>
<div>Element 6</div>
<div>Element 7</div>
<div>Element 8</div>
<div>Element 9</div>
<div>Element 10</div>
<div>Element 11</div>
<div>Element 12</div>
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
<div>Element 4</div>
<div>Element 5</div>
<div>Element 6</div>
<div>Element 7</div>
<div>Element 8</div>
<div>Element 9</div>
<div>Element 10</div>
<div>Element 11</div>
<div>Element 12</div>
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
<div>Element 4</div>
<div>Element 5</div>
<div>Element 6</div>
</div>
</div>The main issue I'm facing is: I want the scroll-menu to act as a container for scrolling, disabling scrolling for the overall-container. The header should always remain visible in this setup. This requires limiting the height of the scroll-menu, but I'm uncertain about how to achieve this.