纵向flex布局中高度的问题

flex布局的高度问题且内容自适应flex:1的高度

HTML

<div id="main">
  <div class="autoHeight">高度不确定</div>
  <div class="div1">
  </div>
</div>

css

#main
{
	width:220px;
	height:100vh;
	border:1px solid black;
	display:flex;
	flex-direction: column;
}
.div1 {
    border:1px solid black;
    flex: 1;
	display:flex;
}

当div1的内容撑满了，div1的高度并不是#main的高度减.autoHeight的高度，而是div1的内容高度
需要解决溢出并且让div1中的内容自适应只需要给div1加height:0就解决了

css

.div1 {
    border:1px solid black;
    flex: 1;
	display:flex;
	height:0;
}