html - 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;
}