Me gustaría hacer una página donde haya filtros en el lado izquierdo de la pantalla, mientras que hay un contenedor, div, en el lado derecho donde se colocan los elementos, pero solo puedes desplazarlos cuando colocas el cursor en eso. espacio, mientras que los filtros permanecen intactos. Y los elementos no salen del espacio, entonces está el espacio con un borde, y los elementos no pasan el borde, si quieres verlos, tendrás que desplazarte hacia abajo, este es mi código. , por ahora. 
<html> <head> <title></title> <style> #vezivanje { background-color: hotpink; height: 80px; display: flex; align-items: center; border-top-left-radius: 20px; border-top-right-radius: 20px; font-size: 20px; } img { height: 300px; } #filter {} </style> </head> <body> <div id="vezivanje"> <span class="upustvo"> <a style="text-decoration:none"><span style="color:white;font-weight:bold">Domaci zadatak</span></a> </span> </div> <div id="filter"> <div id="uzrast"> <h2>Uzrast:</h2> <p><input type="radio">0+</p> <p><input type="radio">3+</p> <p><input type="radio">6+</p> <p><input type="radio">10+</p> </div> <div id="cena"> <h2>Cena:</h2> <p>0<input type="range">10.000</p> </div> </div> <div id="container"></div> <script> //-------------------------- let container = document.querySelector("#container"); let igracke = []; function igrackeinfo(slika, godine, cena) { this.slika = slika; this.godine = godine; this.cena = cena; }; igracke.push(new igrackeinfo("https://yekupi.blob.core.windows.net/ekupirs/1200Wx1200H/EK000359292_1.image", "0+", "2000 RSD")); igracke.forEach(t => { container.innerHTML += "<div class = 'item'><img src = " + t.slika + ">" + "<p>" + t.godine + " " + t.cena + "</p>" "</div>" }) </script> </body> </html>