fox浏览器兼容flexbox问题

背景：在项自测过程中发现的问题，ffox浏览器在展开左侧数据树时，会把右侧数据区也拉伸开来，这是表象。

分析：

1.计算一下右侧数据区的clientHeight高度，是正确的，左侧元数据区域，会随着子组件内部树的拉伸越来越高，但clientHeight到一定值就不变了，和右侧相等。

2.经过自行计算发现，ffox在计算的时候，没有算上层的工具栏height。初始的时候，左侧右侧clientHeight相同，树的展开，左侧就忽略了工具栏的height，这太奇怪了。

3.针对奇怪的现象，需要最小化demo看下是什么原因，因此上面这些都是废话，看下面的内容。

---

Demo链接：https://jsfiddle.net/9817e2yv/5/  (不能访问的同学，自行操作)

问题描述：chrome滚动显示正确，在红色区域，在ffox环境，滚动条显示的是整体区域的，如何解决该问题？

chrome效果： ffox效果：

必备知识：需要熟悉了解Flex布局的有哪些属性，以及各自的作用（自行百度）

解决办法，经过大家的讨论，给出四种有效办法，各有优缺点：

1.https://jsfiddle.net/9817e2yv/6/  增加一个具有高度的div撑开，占位。

2.https://jsfiddle.net/9817e2yv/7/  使用绝对定位，让左侧脱离文档流，但需要右侧增加margin-left属性。

3.https://jsfiddle.net/9817e2yv/8/  上种办法的优化，增加一个固定宽度的div占位，去除右侧的margin-left值，如果需要隐藏左侧，只要同时处理两个div就可以，不需要右侧变更。

4.https://jsfiddle.net/9817e2yv/12/  结合overflow:hidden和flex 1 0 0 处理，控制外层的显示，形成BFC。如果内部需要显示，可以内部设置overflow:visible。

各有优缺点，结合项目实际情况取舍。