html - 使用 overflow-x 进行水平滚动导航栏时的 CSS 异常

Question

我正在创建一个导航栏，当它大于其父容器时，它将水平滚动。

它在导航栏上有一个底部边框，事件链接的边框颜色不同。使用负边距重叠它们效果很好，但是当添加 overflow-x: auto; 时，事件颜色会消失。

这是一个codepen来演示: https://codepen.io/scottknight/pen/aboxYZY

(取消对 overflow-x 的注释，出现事件边框)

<div class="container">
    <div class="navbar">
        <a href="#" class="navlink">Link One</a>
        <a href="#" class="navlink active">Link Two</a>
        <a href="#" class="navlink">Link Three</a>
        <a href="#" class="navlink">Link Four</a>
        <a href="#" class="navlink">Link Five</a>
        <a href="#" class="navlink">Link Six</a>
        <a href="#" class="navlink">Link Seven</a>
        <a href="#" class="navlink">Link Eight</a>
        <a href="#" class="navlink">Link Nine</a>
        <a href="#" class="navlink">Link Ten</a>
    </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

如 this answer 中所述对于不同的问题，某些与 overflow-x 和 overflow-y 的组合是不可能的。当您将 overflow-x 设置为自动时，overflow-y(默认情况下可见)也会变为自动。

查看您的代码，我注意到由于负边距，导航链接边框在技术上溢出了包含的导航栏，因此当溢出可见时，它会从容器中溢出，您可以看到它。但是，当溢出为自动时，您必须在元素内部向下滚动才能看到它。

不要将边框应用到导航栏，而是尝试将它应用到每个导航链接并用事件覆盖它。

.navbar {
    display: flex;
    overflow-x: auto;
}

.navlink {
    padding: 20px;
    flex: none;
    border-bottom: 5px solid gray;
}

.navlink.active {
    border-color: red;
}