移动端Chrome中Container元素显示异常，调整高度致其他环境布局错乱

#container{
    border: 5px solid white;
    
    width: 100%; /* 设置画布宽度为100% */
    min-height: calc(100vh - 50px);
    box-shadow: 5px 3px 2px 2px white;
    border-radius: 10px;
    
}

• 当前样式在手机端Firefox Mobile以及Chrome DevTools的所有设备模拟中显示均正常。
• 尝试调整容器高度以适配移动端Chrome时，Firefox Mobile及Chrome DevTools中的所有设备视图都会出现布局错乱。

内容的提问来源于stack exchange，提问作者ilokanoak