flex布局子元素高度如何自适应？

Question

父级flex布局，子元素的高度由内容撑开可能会很高，怎么让子元素适应父级剩余空间的高度超出后滚动而不是由内容撑开？

Answer 1

1 假如如下结构

给父级元素设置高度，并在父级元素上设置flex布局,

.parent {
  width: 400px;
  height: 500px;
  display: flex;
  flex-direction: column;
}

在子元素上，设置子元素的flex属性值为1，以及overflow属性为 scroll;

.child {
  width: 100%;
  flex: 1;
  overflow: scroll;
}

Answer 2

父元素max-height？？

Answer 3

父元素设置高度，子元素：height: 100%; overflow-y: scroll;？

Answer 4

flex-grow: 1