解决css中flex弹性盒子与overflow一起使用时导致的样式问题

最近在写页面的时候，在一个div上同时设置了flex和overflow后，出现了一些问题。

需求： 网站顶部导航栏为两列布局，一列为宽度固定的logo，另一列的宽度自适应，且内部元素超出时可以滚动

需求比较简单，上来就是一个flex：

<div class="header">
    <div class="logo">LOGO</div>
    <div class="navigator">
        <div class="item">标签一</div>
        <div class="item">标签二</div>
        <div class="item">标签三</div>
        <div class="item">标签四</div>
    </div>
</div>

.header {
    display: flex;
    flex-wrap: nowrap;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #d5dde9;
}

.header .logo {
	flex: 0 0 138px;
	background-color: pink;
}

.header .navigator {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 40px;
    background-color: yellow;
}

.header .navigator .item {
    flex: 0 0 140px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d5dde9;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #343d50;
    margin-left: 15px;
}

/* 解决弹性盒子末尾间距问题 */
.header .navigator::after {
    content: '';
    flex: 0 0 40px;
    height: 40px;
}

然后问题出现：
父元素的高度变了，并且子元素在垂直方向不居中了。
要居中，就得放弃滚动；要滚动就得想别的办法居中。

一开始以为是overflow导致align-items: center失效，使用别的方法解决了。

后来无意之中发现，罪魁祸首是滚动条，不知道为啥就变高了，我丢

知道问题所在就好办了，把父元素的滚动条干掉：

/* 解决overflow:scroll|auto之后弹性盒子高度变高的问题 */
.header .navigator::-webkit-scrollbar {
    width: 0;
    height: 0;
}

搞定！