溢出时箭头消失：将自动元素添加到其他 div

Question

只要我将溢出：自动元素添加到其他 div，框中的指示箭头就会消失。以下是代码：

CSS：

<style>
.arrow_box {
position: relative;
background: #FFF;
box-shadow:0 0 5px rgba(0,0,0,0.4);
width:500px;
border:0px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 73%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFF;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #dadee0;
border-width: 18px;
margin-left: -18px;
}
#livecart{max-height:500px;overflow-y:auto;} //Without overflow it works fine
#inicart{top:0px;}
</style>

HTML：

<div class='inicart'>
<div id='livecart' class='arrow_box'>
...
...
...
</div>
</div>

Livecart div 显示在悬停事件中，如果它的高度超过 max-height 元素，滚动条应该会出现，这是必要的。但这反过来又使箭头从屏幕上消失了。 知道为什么会这样吗？对于这个特殊问题有什么好转的吗？

这里是 jsfiddle 链接 http://jsfiddle.net/nNJSy/2/

您可以尝试从 '#livecart' 中删除 overflow:auto 并看到箭头会出现。

Answer 1

问题在于overflow:auto 会使元素尝试添加滚动条以适应宽度/高度中不可用的任何宽度/高度。这意味着可以通过滚动看到可见区域之外的任何内容。

但该行为不会影响伪元素，因此滚动条不会添加到父元素。

为了让伪元素箭头可见，必须在父级上使用overflow:visible，#livecart，like so

如果你必须有overflow:auto（比如元素有内容），那么你需要使用填充为元素内的箭头腾出空间，在这种情况下添加padding-top:30pxlike so

要查看每种溢出的效果，check this out