css - Flexbox 菜单项在 iPad 上相互折叠

Question

http://fleurine.syberenvanmunster.com/blog/

基于 flexbox 制作了一个响应式菜单，它在我的电脑上运行良好，但在 iPad 上，菜单项都在屏幕右侧相互折叠。我似乎无法弄清楚问题出在哪里，我们将不胜感激!

Screenshot of the problem

Answer 1

因为你的导航的 position 是 absolute ，并且它获得了最近的具有 position:relative 的父元素的宽度

将此添加到您的 CSS 中:

header {
    position: relative;
}