CSS: Why menu border doesn't appear when the scroll bar appears?

Question

LIVE DEMO

Consider the following menu example: (note the red border)

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

Now, imagine that the height of menu-wrapper is small, and we want the vertical scroll bar to appear. For example, we could replace:

height: 300px;

with:

height: 100px;
overflow-y: auto;

But, the red border disappears then:

Why is that? How would you fix that?

PLAYGROUND HERE

Answer 1

Since overflow hides what overflows, you may instead draw the border on the background or with an inset shadow , so it is drawn on the whole height of 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

I think this works:

The problem is that the red border of menu-item is hiding behind the grey border of the menu-wrapper. So, I removed the border from the wrapper and put it in the item, like this:

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

Note: The grey border of the menu-wrapper doesn't take the full height anymore. You could use box-shadow on the wrapper (as answered by GCyrillus) to fix this.

You could integrate both the solutions, so the design won't look too bad in older browsers where box-shadow isn't supported.

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