'How to create a space where you can place items, and you can only scroll up and down in that space

I would like to make a page where there are filters on the left side of the screen, while there being a container, div, on the right side where the items are placed, but you can only scroll them when you place your cursor in that space, while the filters stay untouched. And the items do not go out of the space, so there is the space with a border, and the items don't go over the border, if you want to look at them, you will have to scroll down, this is my code, for now. enter image description here

<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>
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions