内容大于屏幕高度
问题的原因是给#mainDiv设置了height: 100%;属性，导致它占据了整个高度，然后又给它设置了上下边距margin: 18px auto;。
CSS的margin属性在元素的盒模型外部添加空间，以在元素和附近的其他元素之间创建间距。如果你想保持这种间距的外观而不增加额外的高度，可以考虑将属性改为margin: 0 auto;。
这样可以保持水平居中的效果，同时不会给body添加额外的高度，从而解决问题。
这样做没有改变任何内容。
那我如何将其与水平浏览器边界保持距离？当我按照你说的做时，距离就消失了。而且为什么padding在这种情况下不起作用呢？
很高兴你找到了答案（我刚才去吃午饭了）。不过要小心使用flexbox！使用不了解的工具可能会带来危险 🙂