解决设置min-height的子元素高度为百分比不生效的情况

不生效的情况

     <div class="box-inner">
       <div class="content"></div>
     </div>

	.box-inner{
      min-height: 300px;
      background: #cccccc;
    }
    .content{
      height: 30%;
      background: red;
    }

此时不生效.content的高度为0，但若是在box-inner的外部再包裹一层div，并且设置为弹性盒，则可以生效
tips：此处利用弹性盒align-item默认拉伸高度

生效的情况

	<div class="box-outer">
        <div class="box-inner">
          <div class="content"></div>
        </div>
    </div>

	.box-outer{
      display: flex;   //重要
    }
    .box-inner{
      width:100px;
      min-height: 300px;
      background: #cccccc;
    }
    .content{
   	  width:60px;
      height: 30%;
      background: red;
    }