flex跟overflow冲突问题

<style lang ="scss">
.middle-box {
		overflow-y: scroll;
		background-color: #A5A4A4;
		flex-direction: column;
		display: flex;
		height: 350px;
}

.grid-item-box {
        display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
}

</style>

 解决方法：

加上 flex: 1 0 auto; （纵向滚动）
或 flex: 0 1 auto; （横向滚动）

.grid-item-box {
			display: flex;
			flex: 1 0 auto;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height: 100%;
		}

如果grid-item-box 是父容器，就需要加上height:0;或者height:100%。width一样