在HTML中，要實現區域內容的滾動，只需要設定好元素的寬度和高度，然後設置CSS屬性overflow 為auto或者scroll： 在Flex box佈局中，有時我們內容的寬度和高度是可變的，無法確定下來，這時候設置滾動條，可能會失效。只要記住幾個關鍵要素，就可以解決這個問題。 1、清楚的知道當前元 ...
在HTML中，要實現區域內容的滾動，只需要設定好元素的寬度和高度，然後設置CSS屬性overflow 為auto或者scroll：
在Flex box佈局中，有時我們內容的寬度和高度是可變的，無法確定下來，這時候設置滾動條，可能會失效。只要記住幾個關鍵要素，就可以解決這個問題。
1、清楚的知道當前元素的flex flow
如果要設置水平滾動條，那麼父元素的flex-flow要設置為row，如果要設置縱向滾動條，那麼父元素的flex-flow要設置為column。
2、flex設置為1
3、滾動方向的大小（寬度或者高度）設置為0，非滾動方向大小設置為100%或者一個你喜歡的寬度
這樣設置，基本就可以愉快的滾動了。
有時嵌套層數太多，可能也會失效，這時候記住另外一個關鍵點：
4、設置父元素的大小
如果父元素大小不清晰，也會出現滾動條失效的問題，所以需要把父元素的大小設置明白。如果父元素也是可變大小的，那麼要保證嵌套的flex-flow全部一直，然後寬度或者高度設置為0，這樣就可以正常滾動。像我的這個例子：
5、如何橫向和縱向全都跟隨flex滾動，這個比較麻煩，一個方向用上述方法，另外一個方向用calc函數來計算吧。
我的github上有個例子：https://github.com/vularsoft/studio-ui
裡面的html-demo.html文件是一個完全由flex box實現的佈局，感興趣的可以參考。
