Flex子元素无法占满父容器高度的问题排查与解决

问题分析 #

核心问题点：

• .cart-product-row 设置了 align-items: center，导致所有flex子元素垂直居中，无法自动占满父容器高度；
• .cart-product-quantity 使用了 align-content: space-between，但该属性仅作用于多行flex容器，单行场景下需用 justify-content: space-between 实现垂直方向元素均匀分布。

修正后的CSS代码 #

.cart-product-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    /* 替换align-items: center为stretch，让子元素自动占满父容器高度 */
    align-items: stretch;
}
.cart-product-quantity {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 用justify-content实现垂直方向元素均匀分布 */
    justify-content: space-between;
}
.cart-product-detail {
    flex: 2;
    display: flex;
    flex-direction: column;
    padding-right: 20px; /* 可根据需求调整间距 */
}
.cart-product-image {
    flex: 2;
    display: flex;
}
.cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

关键修改说明 #

1. align-items: stretch：这是让flex子元素占满父容器垂直高度的核心属性，替换center后，.cart-product-quantity和.cart-product-image会自动填满.cart-product-row的高度。
2. justify-content: space-between：在.cart-product-quantity的垂直flex布局中，该属性会让加减按钮和数量文本在整个高度上均匀分布，上下按钮分别贴紧容器顶部和底部。
3. 图片容器优化：给.cart-product-image添加display: flex，并设置图片的object-fit: cover，确保图片填满容器同时保持比例，避免变形。

此方案无需使用绝对定位，即可实现数量调整器和商品图片占满父容器高度、按钮垂直均匀分布的需求。

内容的提问来源于stack exchange，提问作者user16731988