在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實作的布局，感興趣的可以參考。