CSS Grid结合meta viewport导致html/body尺寸异常的原因

我尝试构建一个包含header/content/footer的简单CSS Grid布局，原本运行正常，但在设备模拟器中打开后出现了无法理解的表现；更糟的是，iPhone 13 Pro的Safari浏览器上表现也不符合预期，且两者行为不一致。

模拟器中的异常表现 #

• 初始加载符合预期：body形成包含header的网格，主内容沿X轴溢出，页面出现横向滚动条，footer与页面底部对齐。
• 操作后异常：移除使主内容尺寸过大的类后重新添加，元素检查器中显示html和body仅占屏幕一小部分，footer与该部分底部对齐，整个页面可左右滚动，且视图底部出现大片空白区域（截图红框为空白区域，蓝框为html/body位置）。
• 补充：页面初始渲染状态取决于之前的页面状态——section未尺寸过大时刷新，渲染正常；section尺寸过大时刷新，初始渲染即为异常状态。

iPhone 13 Pro Safari中的异常表现 #

• footer被窗口栏遮挡，必须滚动才能看到且无法消除。
• 有时页面会直接加载到尺寸异常模式。

疑问 #

我已将代码简化至最简形式并添加按钮演示行为，知道这与<meta viewport>和100vh、100vw的含义有关，但无法理解具体机制。现需解答：模拟器中导致这种奇怪尺寸变化的原因是什么？

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