I have a some html elements like this:

        <div>
          <div>
            <div id="container"></div>
          </div>
        </div>

And I dynamically add other elements to the container. How can I make all contents of the container fit inside of the div. Basically I don't want the user to scroll at all. I need all contents to shrink-to-fit if needed.

This is the CSS I have for the container:

#container {
  display: grid;
  grid-gap: 0.02em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}