overflow-y autoと矢印が一緒に機能しない

Question

私はdivの前に矢印があります。

私が追加したときに問題が、次のとおりです。

overflow-y: auto; 

矢印が消えます。

https://jsfiddle.net/z95frkuv/

#n { 
position: fixed; 
min-width: 140px; 
min-height:100px; 
max-height:400px; 
//overflow-y: auto; // need to remove this to see arrow 
border:1px solid #000; 
z-index:3000; 
} 
#n:before { 
content: ""; 
vertical-align: middle; 
margin: auto; 
position: absolute; 
left: 0; 
right: 0; 
bottom: 100%; 
width: 0; 
height: 0; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-bottom: 10px solid #000; 
} 

なぜですか？

Answer 1

overflow:auto作品、それは絶対的な位置の要素になります。 CSS

<div class="wrapper"> 
    <div id=n>content<br>content<br>content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br></div> 
</div> 

およびUPDATE：

.wrapper { 
position: fixed; 

z-index:3000; 
} 
.wrapper:before { 
content: ""; 
vertical-align: middle; 
margin: auto; 
position: absolute; 
left: 0; 
right: 0; 
bottom: 100%; 
width: 0; 
height: 0; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-bottom: 10px solid #000; 
} 

#n{ 
    min-width: 140px; 
min-height:100px; 
max-height:400px; 
overflow-y: auto; 
border:1px solid #000; 
} 

フィドル：https://jsfiddle.net/yow7wm7r/1/

を、それを克服するラッパーのdivを追加するために

Answer 2

これはオーバーフローが起こっていることです。要素がボックス内で定義されているにもかかわらず、CSSが外側に張り付いている場合、オーバーフローがそれをクリップします。 overflow:hiddenよう

http://www.w3schools.com/cssref/pr_pos_overflow.asp