利用flex属性实现同父元素下子元素弹性扩展

最近需要在一个固定高度的div下，设置两个子元素，其中一个高度会根据内容弹性扩展，另一个则需要根据这个兄弟元素的高度进行调整

简单来说就是已知父元素高度h，兄弟元素高度h1，元素自身高度不超过h-h1

css无法直接获取兄弟元素的属性，因此使用flex属性进行操作

实例代码如下：

<div style="display: flex;flex-direction: column;height:300px;">
  
  <div style="flex:0 0 auto">   
    //这里是动态扩展的内容，div1
  </div>
  
  <div style="overflow-y: auto;">
    //这里是需要随之改变的内容，div2
  </div>
</div>

display:flex能够实现父元素属性动态改变时，子元素跟随父元素按比例压缩或扩张

flex-direction则是选择动态扩展的方向

子元素中的flex属性可以参照CSS flex 属性，分别是

flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

flex-grow:0 表示元素不随比例扩张

flex-shrink:0 表示该元素不随比例压缩

flex-basis:auto 表示该元素长度等于项目本身长度，如果没有设置长度则根据内容自动设置

当div1的内容改变时，div1本身的高度会随着其中的内容动态扩展，在flex模式下，div1和div2的高度本来应该按照比例一同改变，但是此时div1不接受扩张与压缩，因此所有的高度改变都需要div2来进行弥补，如此便实现了div2高度跟随div1的改变而改变