技術標籤：CSScss3html5flexbox

最近在寫頁面的時候，在一個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;
}

搞定！