溢出-y：父元素上的auto隐藏位置固定的子元素

Posted 2021-05-02

在Safari中，当父元素将overflow-y设置为auto时，当子元素的位置固定时，它将overflow-x视为scroll或visible。有没有解决这个问题？请看这个jsFiddle

.flyout{
    position: fixed;
    //this doesnt display
}

.parent{
    overflow-y: auto
}

弹出元素在safari中不可见，而在chrome和firefox中仍然可见

答案

http://jsfiddle.net/magicdawn/vt1cweyx/10/

• 从包装中删除相关的overflow
• 将height和overflow-y添加到直接孩子

由于overflow-x: visible和overflow-y: scroll在野生动物园中表现得很奇怪，所以我们将它们分成2个元素。

• 顶部包装纸.parent处理overflow-x: visible
• 内部元素.menu处理overflow-y: scroll