Tengo algunos elementos html como este:

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

Y dinámicamente agrego otros elementos al container . ¿Cómo puedo hacer que todo el contenido del contenedor quepa dentro del div. Básicamente, no quiero que el usuario se desplace en absoluto. Necesito que todos los contenidos se encojan para ajustarse si es necesario.

Este es el CSS que tengo para el contenedor:

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