SOURCE

/**
flex竖布局下。上面是一个设置了高度的div，下面是一个自动占用全部空间的div。当这个时候下面的高度超出剩余空间的时候会占用其它空间将上面的div挤小。
**/
/**
解决方法加个min-height
**/

<div class="out">
  <div class="one">
    <div class="one-in"></div>
  </div>
  <div class="two">
    <h1>2</h1>

  </div>
</div>

.out{
  height:200px;
  border:1px solid red;
  display:flex;
  flex-direction:column;
}
.one{
/*   height:100px; */
  border:1px solid green;
	min-height: 100px;
}
.two{
  border:1px solid black;
  flex-grow:1;
  overflow-y:auto;
}
.one-in{
  height:100%;
  background:pink;
}