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

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