有没有办法显示父元素边界之外的子元素溢出：隐藏？

Question

我正在开发一个允许Jquery Mobile中的弹出式面板的插件。

面板将如下所示：

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
</div>

并追踪JQM页面的内容部分。

示例（错误）：sample

面板的行为类似于视口或pageContainers。默认情况下，JQM仅使用正文作为pageContainer。我的插件还允许面板，因此您可以将弹出窗口集成到正常导航中。

我的问题：
我在弹出窗口中添加了三角形，但是我需要保持面板 CSS overflow-x：hidden 从而隐藏三角形。如果我注释掉溢出：隐藏，三角形是可见的，但当我更改页面时，面板“渗出”，如下所示：

当内容部分确定滚动条时，我尝试将 overflow：hidden 改组，并将其设置在popover内的页面上但没有任何效果。我不想在面板外移动三角形，所以：

问题：
有没有办法在父类之外显示溢出的子元素：隐藏或为什么设置overflow-x：hidden隐藏我的三角形，它位于顶部/底部（比y更多y）？

只是寻找一些想法或其他解决方法。

感谢您的帮助！

修改 这是三角形CSS：

.popover_triangle { 
    position: absolute;
    line-height: 0%; 
    width: 0px; border-top: 16px solid rgba(0,0,0,0); 
    border-left: 16px solid rgba(0,0,0,0); 
    border-right: 16px solid rgba(0,0,0,0); 
    border-bottom: 16px solid black;  
    }
.ui-triangle-top .popover_triangle { 
    top: -32px;
    }
.ui-triangle-bottom .popover_triangle { 
    bottom: -34px;
    }

popover有：

.ui-popover { 
    position:  absolute; 
    z-index:1005 !important; 
    border: 3px solid black;  
    border-radius: 4px; 
    left: auto; 
    }
.popover1 { 
    margin-top: 3.25em; 
    right: 5em;  
    height:25em; 
    width: 15em; 
    top: 0;
    }

Answer 1

不，使用overflow-x：hidden，你不能让那个三角形弹出绝对定位的弹出窗口......我已经在各种浏览器上试过了！

你需要做的是在你的popover中创建另一个div ，然后应用并溢出-y：滚动或自动到该div。 （我假设您可能意味着溢出-y而不是overflow-x，因为滚动条是垂直的？）将正常的溢出保留到popover元素。为了获得溢出-y：自动到内部div工作正常，你需要给它一个高度，例如高度：100％。 （如果你不能指定一个像素数量，100％不会为popover中的其他元素腾出空间，还有其他方法可以解决这个问题）

例如：

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
    <!-- insert extra DIV here that contains content and hidden overflow -->
</div>