CSS如何实现flex布局下某子元素缩小时另一子元素自动增大

纯CSS完全可以实现这个需求，flex布局原生支持这类自适应场景，你之前用flex-grow没生效，核心是没搭配纵向flex布局和文本截断的属性组合——flex-grow本身只负责分配剩余空间，不会自动处理文本换行截断。

实现逻辑非常简单，不需要JS判断文本长度，也不需要针对不同长度的标题写单独样式，核心规则只有3条：

• 给200px高的底部父容器设置flex-direction: column，让子元素纵向排列
• 标题元素设置flex-shrink: 0，禁止被压缩，按自身内容实际高度占位，同时加最多2行的截断限制，避免标题过长把摘要空间完全挤没
• 摘要元素设置flex-grow: 1，自动占满标题占用后剩下的所有容器高度，搭配多行截断属性，会根据剩余高度自动计算可展示的行数：标题占1行时剩余高度更多，摘要就多展示1行；标题占2行时剩余高度更少，摘要就自动少展示1行，刚好适配容器尺寸。

核心实现代码如下：

/* 卡片底部灰色父容器 */
.card-footer {
  height: 200px;
  display: flex;
  flex-direction: column; /* 必须设为纵向排列，默认横向排列不满足需求 */
  padding: 16px;
  background: #f5f5f5;
  box-sizing: border-box;
}

/* 标题样式 */
.card-title {
  flex-shrink: 0; /* 禁止标题被压缩，按内容实际高度占位 */
  margin: 0;
  line-height: 24px;
  font-size: 18px;
  font-weight: 600;
  /* 多行截断基础配置 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 限制标题最多占2行，避免标题过长完全挤占摘要空间 */
  -webkit-line-clamp: 2;
}

/* 摘要样式 */
.card-desc {
  flex-grow: 1; /* 占满标题占用后剩余的所有容器高度 */
  margin: 12px 0 0;
  line-height: 22px;
  font-size: 14px;
  color: #666;
  /* 多行截断基础配置 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 注意：这里不要设置固定的-webkit-line-clamp值，否则无法自适应行数 */
}

实现踩坑提醒：

1. 摘要元素不要设置固定的-webkit-line-clamp值，否则会强制显示固定行数，无法自适应剩余空间
2. 标题和摘要都要设置固定的line-height数值，不要用normal或者无单位倍数行高，避免不同浏览器计算行数出现偏差
3. 如果需要给父容器加内边距，一定要配box-sizing: border-box，否则容器实际高度会被padding撑得超过200px
   这个方案兼容所有主流现代浏览器，不需要JS介入，完全满足你要的单CSS类适配所有内容长度的需求。

效果参考：

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