Css 垂直调整窗口大小时，Div容器消失

我有一个奇怪的问题，为什么当我垂直调整窗口大小时，我的div容器会收缩/消失，并且不遵循正常的网站布局。下面是我所说内容的截图

如您所见，红色应该覆盖所有内容，包括包含所有颜色的框。这只发生在我垂直调整我的网页时，我不明白它为什么会这样做

这是我的密码：

。主要内容{
显示器：flex；
弯曲方向：立柱；
高度：计算（100%-84px）；
}
.主要内容容器{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
身高：100%；
背景：红色；
}
.信息箱容器{
显示器：flex；
证明内容：中心；
}
.信息框{
显示器：flex；
高度：195px；
宽度：350px；
背景：白色；
右边距：15px；
盒影：0 2px4p0 rgba（0,0,0,0.1）；
}
.信息框。左侧{
显示器：flex；
弯曲方向：立柱；
弹性：1；
背景：红色；
}
.信息框.顶部{
弹性：1；
显示器：flex；
证明内容：中心；
背景：黄色；
}
.信息框.顶部p{
边缘底部：5px；
背景：绿色；
字体大小：25px；
自对准：柔性端；
}
.信息框.底部{
弹性：1；
显示器：flex；
证明内容：中心；
背景：橙色；
}
.信息框。右侧{
弹性：1；
背景：蓝色；
}
.信息框：最后一个孩子{
保证金：0；
}
.欢迎留言{
文本对齐：居中；
高度：自动；
}
欢迎光临{
字体大小：30px；
字体重量：较轻；
}

欢迎你，奥马尔

五百

报告

您可以将

最小高度添加到
.main content
中。在您的情况下，
.info框的高度为
195px
。将
.main content
的
min height
设置为
195px
，以便在调整屏幕大小时，屏幕不会缩小到
195px
之外，即
信息框的大小



。主要内容{
显示器：flex；
弯曲方向：立柱；
高度：计算（100%-84px）；
最小高度：195px；
}
.主要内容容器{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
身高：100%；
背景：红色；
}
.信息箱容器{
显示器：flex；
证明内容：中心；
}
.信息框{
显示器：flex；
高度：195px；
宽度：350px；
背景：白色；
右边距：15px；
盒影：0 2px4p0 rgba（0,0,0,0.1）；
}
.信息框。左侧{
显示器：flex；
弯曲方向：立柱；
弹性：1；
背景：红色；
}
.信息框.顶部{
弹性：1；
显示器：flex；
证明内容：中心；
背景：黄色；
}
.信息框.顶部p{
边缘底部：5px；
背景：绿色；
字体大小：25px；
自对准：柔性端；
}
.信息框.底部{
弹性：1；
显示器：flex；
证明内容：中心；
背景：橙色；
}
.信息框。右侧{
弹性：1；
背景：蓝色；
}
.信息框：最后一个孩子{
保证金：0；
}
.欢迎留言{
文本对齐：居中；
高度：自动；
}
欢迎光临{
字体大小：30px；
字体重量：较轻；
}

欢迎你，奥马尔

五百

报告

高度：计算（100%-84px）这就是我guess@samuellawrentz但是如果没有它，当我的窗口是全屏的时候，容器的大小将不能适应整个屏幕。如果你不支持旧的浏览器。你可以试试高度：100vh@samuellawrentz 100vh不会考虑导航条已经占用的空间和导航条下方的边距，因此我使用了calc函数。这是个好主意。但我将如何将内容垂直居中？请记住还有一个“welcome msg”div，我也需要垂直居中。如果我在main content div上设置了一个最小高度，当我以全屏模式查看页面时，它不会影响它吗？@OmarDajani请在问题中提及这些要求。还有，我不确定你的情况是什么。看看这个代码笔，它工作得很好！非常感谢你！对不起，一开始我不清楚。