我正在构建一个包含3个部分的登录页(尚未对第三部分进行编码(。
每个部分都需要是屏幕的100%。
顶部2个部分各有2列。
我使用的是Flexbox，只要浏览器是全屏的，并且部分没有内容，一切看起来都很好。当我开始在部分内添加内容，然后调整窗口大小时，部分开始重叠，尤其是在仅垂直调整大小时。
当水平调整大小时，这不是问题，因为我可以将flex-direction:column;切换到flex-direction:row;以使它们堆叠。
当调整窗口大小并防止重叠时，如何在使所有内容都响应的同时获得部分的100%视图？
CSS网格是一个更好的选择吗？
这是一支密码笔。请将代码窗格向上滑动，然后调整窗口大小，您会注意到第二部分与第一部分的按钮、文本和图像重叠。代码笔：https://codepen.io/MarwanAK10/pen/eYedLoZ
如果你尝试从html中删除按钮、段落和图像，那么问题就消失了，并且在调整大小时，部分不会重叠。。。
谢谢！
您可以对不同大小的屏幕使用@media查询。因此，您可以根据屏幕大小以不同的方式显示所有内容。您可以在此处查看文档。
可能将溢出：隐藏在部分