如何使用 CSS 使 flexbox 子项达到其父项的 100% 高度？

在使用flexbox布局时，子项的高度默认是根据其内容来确定的。如果想让子项的高度达到其父项的100%，可以通过以下几种方式来实现。

方法1：设置 flex-grow 属性

将子项的flex-grow属性设置为1，就可以让子项填满其父项的高度，实现子项高度达到100%的效果。

.parent {
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
}

方法2：设置 align-items 属性

使用align-items属性可以控制子项的垂直对齐方式。将其设置为stretch，即可让子项填充满其父项的高度。

.parent {
  display: flex;
  align-items: stretch;
}

方法3：设置 min-height 属性

使用min-height属性可以将子项的最小高度设置为其父项的高度，即可实现子项高度达到100%的效果。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100%;
}

以上三种方法都可以实现子项高度达到100%的效果，具体使用哪种方式要根据具体的需求来决定。