javascript - CSS盒子模型问题

Question

我一直在尝试为我的一个项目找出 CSS。

我有一个类'header-container'应用于div容器，检查如下 -

我有一个疑问，为什么'包装器' div 的内容是'header-container' div 的子级，不完全在内容框（即蓝色突出显示的框）内，并且可以在橙色部分看到。请在下面找到包装器 div 的 CSS -

为什么元素 CSS 不遵循 CSS 框模型？以及如何解决？

项目发布在 - https://surijatin.github.io/covid-second-dose/

标签： javascripthtmlcssflexbox

Answer 1

答案在您的图像中：

• .header-container指定高度为 2vh。这就是身高限制。

• 所以里面的文字.wrapper只是溢出了那个固定的高度。

橙色部分是您设置的 2vh 顶部和底部边距。

删除height: 2vh，或切换到min-height: 2vh，问题应该得到解决。