I have a page which is supposed to be non-interactive. It's just a screen you can show during a teams meeting, and then you don't touch it after than.
Basically I have a parent container, which just has width: 100vw and height: 100vh. So it just takes up the entire browser window. Then stuff/children is added to this parent. Each child takes up some space, but at some point, there might be too many children, and they begin to expand the parent div - i.e. making the parent not fit the screen anymore. If this was an interactive page, I could just add overflow-y: auto, and I would be able to scroll inside the container. But again, I am not going to touch this screen.
Therefore I was looking for some kind of solution, so that when the parent had no more space, the children just scaled (or something similar), so they could fit. I know, at some point, if there were a million children, each children would be so tiny. But that doesn't really matter :)
So yeah, are there any way to do this, or do I have to think about something else ?
You could use relative sizing (em, rem, %, vh, vw) instead of px. I believe this would work. For example, you have 20 child elements, their width is 100% (whole parent element) and their height is 5% each.