如何为屏幕宽度小于700px时切换为flex-direction: column的弹性容器设置max-height？

这个问题是flex布局在column方向下的典型特性导致的：当flex容器设置为flex-direction: column时，flex子元素默认的min-height: auto会让子元素高度至少容纳自身内容，直接撑开容器，导致你设置的max-height被忽略。哪怕加了overflow: hidden，也可能因为子元素的约束没解除，效果不稳定。

下面是具体的修复方案，一步步帮你搞定：

步骤1：优化移动端flex容器样式 #

在移动端媒体查询里，给.inner-div添加上溢出处理属性，确保max-height能生效：

@media only screen and (max-width: 700px) {
  .inner-div{
    flex-direction: column;
    overflow: auto; /* 内容超出时显示滚动条，用hidden则直接裁剪，按需选择 */
  }
}

注：如果你希望移动端的max-height和桌面端不同，可以在这里单独重新设置，否则会继承桌面端的250px值

步骤2：解除flex子元素的高度约束 #

因为flex子元素默认的min-height: auto会阻止容器的高度限制生效，所以需要给.img-container和.text加上min-height: 0，让它们能适配容器的高度：

.img-container{
  flex:1;
  min-height: 0; /* 关键：允许子元素高度被容器限制 */
}
.text{
  background: silver;
  padding: 2em;
  flex:1;
  min-height: 0; /* 同样添加这个属性 */
  overflow: auto; /* 可选：如果文本内容过多，让文本区域单独滚动 */
}

完整修改后的CSS代码 #

*{
 margin:0;
 padding:0;
 box-sizing: border-box;
}
.inner-div{
 display: flex;
 max-height: 250px;
}
.img-container{
 flex:1;
 min-height: 0; /* 添加解除高度约束 */
}
img{
 width:100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.text{
 background: silver;
 padding: 2em;
 flex:1;
 min-height: 0; /* 添加解除高度约束 */
 overflow: auto; /* 可选处理文本溢出 */
}
@media only screen and (max-width: 700px) {
 .inner-div{
 flex-direction: column;
 overflow: auto; /* 添加溢出处理 */
 }
}

生效原理说明 #

• min-height: 0解除了flex子元素的默认高度限制，让它们可以收缩以适应容器的max-height；
• overflow: auto/hidden让容器在内容超出时，要么提供滚动能力，要么裁剪内容，确保容器高度不会突破max-height；
• 移动端媒体查询中保留的max-height（或单独设置的值），确保小屏幕下高度约束生效。

现在测试一下，当屏幕宽度小于700px时，.inner-div会被牢牢限制在设置的高度内，图片和文本区域会平分这个高度，内容超出时会按照你设置的溢出规则处理。

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