CSS anomaly when using overflow-x for horizontal scrolling navbar - html

Question

I am creating a navbar that will horizontally scroll when it is larger than its parent container.
It has a bottom border on the navbar with a different border color for the active link. Using a negative margin to overlap them works fine but when adding overflow-x: auto; the active color disappears.
Here is a codepen to demonstrate:
https://codepen.io/scottknight/pen/aboxYZY
(uncomment the overflow-x and the active border appears)
<div class="container">
<div class="navbar">
Link One
Link Two
Link Three
Link Four
Link Five
Link Six
Link Seven
Link Eight
Link Nine
Link Ten
</div>
</div>
.container {
width: 800px;
}
.navbar {
display: flex;
/* overflow-x: auto; */
border-bottom: solid;
border-bottom-width: 5px;
border-color: gray;
}
.navlink {
padding: 20px;
flex: none;
margin-bottom: -5px;
}
.navlink.active {
border-bottom: solid;
border-bottom-width: 5px;
border-color: red;
}

Answer 1

As described nicely in this answer to a different question, some combinations with overflow-x and overflow-y are not possible. When you set overflow-x to auto, overflow-y (visible by default) also becomes auto.
Looking at your code, I noticed that due to a negative margin, the navlink border is technically overflowing the containing navbar, so when overflow is visible, it bleeds out of the container and you can see it. When overflow is auto, however, you have to scroll down inside your element to see it.
instead of applying the border to your navbar, try applying it to each navlink and override it with active.
.navbar {
display: flex;
overflow-x: auto;
}
.navlink {
padding: 20px;
flex: none;
border-bottom: 5px solid gray;
}
.navlink.active {
border-color: red;
}