如何避免Flex容器高度塌陷？

参考资料

1. 如何调试Flex布局问题？
2. 有没有推荐的 CSS 过渡动画库？
3. 如何用Flex布局制作响应式布局？
4. 如何用Flex布局实现导航栏？
5. 元素选择器详细说明以及案例
6. Flex布局在动画制作中的应用？
7. css div阴影效果,
8. 哪种布局方式更适合移动端？

1. 设置固定高度

   .flex-container {
     display: flex;
     height: 300px; /* 固定高度 */
   }

2. 使用min-height

   .flex-container {
     display: flex;
     min-height: 200px; /* 最小高度 */
   }

3. 设置align-items属性

   .flex-container {
     display: flex;
     align-items: stretch; /* 默认值，子项拉伸填充高度 */
   }

4. 子项设置高度

   .flex-item {
     height: 100%; /* 子项继承容器高度 */
   }

5. 使用flex-grow

   .flex-item {
     flex-grow: 1; /* 子项扩展填充剩余空间 */
   }

6. 清除浮动（如果存在浮动元素）

   .flex-container::after {
     content: "";
     display: table;
     clear: both;
   }

示例：

<div class="flex-container" style="display: flex; min-height: 200px;">
  <div class="flex-item" style="flex-grow: 1; background: lightblue;"></div>
</div>