Tengo una página que se supone que no es interactiva. Es solo una pantalla que puede mostrar durante una reunión de equipos y luego no la toca.
Básicamente, tengo un contenedor principal, que solo tiene width: 100vw y height: 100vh . Así que solo ocupa toda la ventana del navegador. Luego se agregan cosas/hijos a este padre. Cada niño ocupa algo de espacio, pero en algún momento, puede haber demasiados niños y comienzan a expandir la división principal, es decir, haciendo que el padre ya no se ajuste a la pantalla. Si se tratara de una página interactiva, simplemente podría agregar overflow-y: auto y podría desplazarme dentro del contenedor. Pero de nuevo, no voy a tocar esta pantalla.
Por lo tanto, estaba buscando algún tipo de solución, de modo que cuando el padre no tuviera más espacio, los niños simplemente escalaran (o algo similar), para que pudieran caber. Lo sé, en algún momento, si hubiera un millón de niños, cada niño sería tan pequeño. Pero eso realmente no importa :)
Así que sí, ¿hay alguna forma de hacer esto, o tengo que pensar en otra cosa?
Puede usar el tamaño relativo (em, rem, %, vh, vw) en lugar de px. Creo que esto funcionaría. Por ejemplo, tiene 20 elementos secundarios, su ancho es del 100 % (elemento principal completo) y su altura es del 5 % cada uno.