部分低版本浏览器中flex布局孙子元素高度设置100%失效-终极解决方案

部分低版本浏览器中flex布局孙子元素高度设置100%失效-终极解决方案— vue技术交流群（864583465)

废话不多说，直接上代码，如下：

  <div class="father">
      <div class="son">
        <div class="grand-son">
          grand-son
        </div>
      </div>
    </div>
    <style>
	.father {
	    height: 200px;
	    display: flex;
	    flex-direction: column;
	  }
	  .son {
	    height: 0;  // 指定给个具体的值就行，0 或100% 或其他都行
	    min-height: 100%; // 必须要设置
	    max-height: 100%;  // 必须要设置
	  }
	
	  .grand-son {
	    height: 100%;
	  }
	</style>

核心代码：一定要在子元素上设置如下样式

    height: 0;
    min-height: 100%;
    max-height: 100%;