当需求是: 页面纵向排列,且最后一个元素撑满剩余高度

 flex:1在横向排列时是可以的,但是纵向排列会失效,此时需要给最后一个子元素设置align-self: stretch;即可撑满剩余高度

<div class="father">
	<div class="child child1"></div>
	<div class="child child2"></div>
	<div class="child child3"></div>
</div>



.father{
    height: 100%;
	display: flex;
	flex-direction: column;
	.child1{
		height: 200px;
	}
	.child2{
		height: 100px;
	}
	.child3{
		align-self: stretch;
        overflow:auto
	}
}