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;

使用：

height: 100px;
overflow-y: auto;

但是，the red border disappears then：

为什么？你会如何解决这个问题？

PLAYGROUND HERE

Answer 1

我认为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;
}

Answer 2

由于溢出会隐藏溢出的内容，您可以在背景上绘制边框或使用插入阴影，因此它会在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;
}