flex-direction:column模式下flex-grow失效问题求助（父元素已设固定高度）

问题根源 #

当flex容器设置为flex-direction: column时，子元素默认的min-height: auto会让元素被内部图片撑开高度，导致flex:1和hover时的flex:4无法按父容器固定高度（400px）进行比例分配，看起来就像flex属性被忽略。

修复步骤 #

给.split-container的子div添加min-height: 0，解除内容对元素高度的限制，让flex布局能正常计算高度分配：

.split-container div {
    flex: 1;
    transition-duration: 1s;
    min-height: 0; /* 新增这一行 */
}

修改后的完整CSS代码 #

/* Phones */
@media only screen and (max-width: 810px) {
    .split-container {flex-direction: column;}
}
/* Medium devices */
@media only screen and (min-width: 810px) {
    .split-container {flex-direction: row;}
}
/* Desktop */
@media only screen and (min-width: 1200px) {
    .split-container {flex-direction: row;}
}

body {
  width: 100%;
 }
 
.container-xl {
  padding: 30px 30px; /* 补全语法缺失的冒号 */
}

.case-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.split-container {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 400px;
    gap: 10px;
}

.split-container div {
    flex: 1;
    transition-duration: 1s;
    min-height: 0; /* 新增 */
}

.split-container div:hover {
    flex: 4;
}
.split-container img {
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
}

原理说明 #

在flex垂直布局中，子元素的min-height:auto会强制元素高度至少等于内容高度，打破了flex按比例分配父容器高度的逻辑。设置min-height:0后，元素高度可以被flex属性自由控制，就能实现hover时的高度变化效果了。

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