我正在尝试创建一种窗体，该窗体以特定的视口宽度从一列切换到两列。但是，我希望左侧列保持固定，而右侧列（包含所有问题）滚动。
我已经完成了这项工作，但是由于某种原因，在form元素下方正在加载较大的空白空间。怪异的是，滚动到溢出容器的底部会使视口高度收缩到正常大小。
该表格分为三个部分。第一个包含有关表单的信息，第二个包含问题，由三个子部分组成，第三个包含提交按钮：
<section>ABOUT</section>
<section>
<section>QUESTIONS</section>
<section>QUESTIONS</section>
<section>QUESTIONS</section>
</section>
<section>SUBMIT</section>
我需要帮助来了解为什么溢出属性使这种情况发生。如果答案能帮助我设置此表单的样式，以便在大屏幕上没有窗口滚动条，我也将不胜感激。
这是我已经尝试过的：
我仔细检查了所有小节。一组输入似乎是导致此问题的原因，但我不知道如何或为什么。
我知道，如果我将display:grid;放在自己的栏目中，就无法将它们设为position:fixed;。
我也不希望移动“提交”容器，因为这意味着该按钮出现在问题之前，似乎不太容易使用。
Flex并没有帮助，我希望它具有响应能力，所以我不想使用绝对或固定位置。
Lonnie Best commented here说网格可以逃避父容器。有办法阻止这种情况吗？
我已经在Edge中测试过该页面，但在那里没有发生。据我所知，仅在Firefox中。
这里是一个小提琴：https://jsfiddle.net/eh7s94a2/（确保结果窗口是平坦的，否则不会发生溢出现象）
谢谢！