CSS：爲什麼菜單邊框在滾動條出現時不出現？

Question

LIVE DEMO

考慮下面的菜單例如：（注意紅色邊框）

<div class="menu-wrapper"> 
    <div class="menu-item">Hello</div> 
    <div class="menu-item">Stack</div> 
    <div class="menu-item">Overflow</div> 
</div> 

.menu-wrapper { 
    display: flex; 
    flex-direction: column; 
    width: 200px; 
    background-color: #ccc; 
    border-left: 5px solid #bbb; 
    height: 300px; 
} 
.menu-item { 
    padding: 20px; 
    cursor: pointer; 
} 
.menu-item:hover { 
    margin-left: -5px; 
    background-color: #444; 
    color: #fff; 
    border-left: 5px solid red; 
} 

現在，想象的menu-wrapper的高度小，我們希望垂直滾動酒吧出現。例如，我們可以更換：

height: 300px; 

有：

​​

但是，the red border disappears then：

這是爲什麼？你會如何解決這個問題？

PLAYGROUND HERE

Answer 1

由於溢出隱藏着溢出，你可以改爲繪製的背景或與插圖陰影邊框，所以它畫在cntainer的整個高度：DEMO

.menu-wrapper { 
    display: flex; 
    flex-direction: column; 
    width: 200px; 
    background-color: #ccc; 
    box-shadow: inset 5px 0 #bbb;/* here draws an inside left border via shadow */ 
    height: 300px; 
    height: 100px; 
    overflow:auto; 
} 
.menu-item { 
    padding: 20px; 
    cursor: pointer; 
} 
.menu-item:hover { 
    background-color: #444; 
    color: #fff; 
    border-left: 5px solid red; 
} 

Answer 2

我想this works：

的問題是，menu-item紅色邊框隱藏的menu-wrapper的灰色邊框後面。所以，我刪除從包裝的邊界，並把它的項目，如：

.menu-wrapper { 
    ...  
    /* border-left: 5px solid #bbb; No longer needed */ 
    height: 100px; 
    overflow-y: auto; 
} 
.menu-item { 
    padding: 20px; 
    cursor: pointer; 
    border-left: 5px solid #bbb; /* Add border to menu-item rather than the wrapper */ 
} 
.menu-item:hover { 
    /* margin-left: -5px; No longer needed*/ 
    background-color: #444; 
    color: #fff; 
    border-left: 5px solid red; 
} 

注：菜單，包裝的灰色邊框不走全高了。你可以在包裝器（as answered by GCyrillus）上使用box-shadow來解決這個問題。

你可以整合這兩種解決方案，所以在不支持box-shadow的舊版瀏覽器中，設計看起來不會太壞。

.menu-wrapper { 
    ... 
    box-shadow: inset 5px 0 #bbb; 
}