当父容器不能包含更多时缩放子容器

Question

我有一个页面应该是非交互式的。它只是一个您可以在团队会议期间显示的屏幕，然后您就不要再触摸它了。

基本上我有一个父容器，它只有width: 100vw 和height: 100vh。所以它只占用了整个浏览器窗口。然后东西/孩子被添加到这个父母。每个孩子占用一些空间，但在某些时候，可能有太多的孩子，他们开始扩展父 div - 即使父 div 不再适合屏幕。如果这是一个交互式页面，我可以添加overflow-y: auto，然后我就可以在容器内滚动。但同样，我不会触摸这个屏幕。

因此我一直在寻找某种解决方案，这样当父母没有更多空间时，孩子们就可以缩放（或类似的东西），这样他们就可以适应了。我知道，在某个时候，如果有一百万个孩子，每个孩子都会那么小。但这并不重要:)

是的，有什么办法可以做到这一点，还是我必须考虑其他事情？

Answer 1

您可以使用相对大小（em、rem、%、vh、vw）代替 px。我相信这会奏效。例如，您有 20 个子元素，它们的宽度为 100%（整个父元素），高度为 5%。