如何拉伸 Flex 子元素以填充容器高度

使用 Flexbox 时，经常会遇到子元素无法填充的问题不会拉伸到其容器的整个高度。这通常是由于 height: 100% 属性的错误使用造成的。

在 Flexbox 中，height: 100% 属性可能会出现问题，因为：

• 父元素需要固定height，这违背了 Flexbox 的原则。
• 当存在多个孩子时，对一个孩子使用 height: 100% 将忽略其他孩子。

解决方案是删除height: 100% 属性并依赖于 Flexbox 的默认行为。默认情况下，行方向（典型布局）上的弹性项目通过属性align-items:stretch 垂直对齐。这意味着子元素将自动拉伸以填充容器的可用高度。

下面是一个示例，演示了没有高度的正确用法：100%：

  

  

    some

    cool

    text
  

在此示例中，无论蓝色子项的文本高度如何，黄色子项都将拉伸以填充容器的高度。这是因为默认的align-items:stretch值确保Flex项目垂直拉伸以占据可用空间。