flex布局下overflow失效問題

經常我們會使用flex布局，但是flex布局常常會遇到一些不可思議的麻煩，下面介紹一下overflow遇到的麻煩

 

我在工作中使用了左右兩欄布局

.container {
    display: flex;
}
.left {
    flex: 1;
    overflow: auto;
}
.right {
    width: 500px;
}

 

我的想法是左邊寬度要自適應，而且需要滾動條，雖然這樣設置了，但奇怪的事情發生，左邊的內容並沒有出現滾動條，通過查閱資料，可以通過如下辦法解決

.container {
    display: flex;
}
.left {
    flex: 1;
    overflow: auto;
    width: 0;
}
.right {
    width: 500px;
}

 

樣式需要多加一個 width: 0;