CSS Flexbox 高度自适应: 使用 flex-wrap 和 auto 高度

要实现高度自适应，可以在flex容器的父元素中设置高度为'auto'或者'100%'。这样flex容器的高度就会随着内容的增加或减少而自动调整。例如：

HTML代码：

<div class='flex-container'>
  <div class='flex-item'>Item 1</div>
  <div class='flex-item'>Item 2</div>
  <div class='flex-item'>Item 3</div>
  <div class='flex-item'>Item 4</div>
</div>

CSS代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: auto;
}
.flex-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

在上述代码中，flex容器的高度设置为'auto'，这样容器的高度会根据内容自动调整。每个flex项目的高度设置为100px，当容器宽度不足以容纳所有项目时，会自动换行，但是高度会自适应变化。