React中absolute定位导致flex容器高度异常问题排查

开发React ExpandingCards组件时出现样式异常：给.card类下的.card-name元素设置position: absolute属性后，flex布局容器.cards-container下的内容无法正常显示，即便已经显式给容器指定height: 90vh，视觉上容器整体高度仍表现为0。
相关组件代码如下：
ExpandingCards组件：

function ExpandingCards() {
  return (
    <div className="container">
      <div className="cards-container">
        <Card
          card_img="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg"
          id="1"
        />
        <Card
          card_img="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg"
          id="1"
        />
      </div>
    </div>
  );
}

Card组件：

function Card(props) {
  return (
    <>
      <div
        id={props.id}
        className="card"
        style={{ backgroundImage: `url(${props.card_img})` }}
      >
        <h4 className="card-name">cardName</h4>
      </div>
    </>
  );
}

对应CSS样式：

.card {
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  background-repeat: no-repeat;
  position: relative;
}
.card-name {
  bottom: 0;
  left: 0;
  position: absolute;
}
.cards-container {
  height: 90vh;
  display: flex;
}

实际运行效果：

• 绝对定位元素会脱离正常文档流，不再占据父元素的内容空间。设置position: absolute后，.card-name不再参与.card内部的尺寸计算，此时.card内部没有任何处于正常流的内容，无法靠内容撑开自身宽度。
• .card作为flex容器.cards-container的直接子项，默认flex属性为flex: 0 1 auto：即flex-grow默认值为0，不会主动拉伸占用容器的剩余宽度；flex-basis默认值为auto，宽度由自身内容宽度决定。由于内部无正常流内容，.card的最终计算宽度为0，对应的背景图、内部文字都无法显示。
• 所谓“容器高度变为0”是视觉错觉：.cards-container设置的height: 90vh实际是生效的，但因为内部所有卡片宽度为0、无可见内容，且容器本身没有设置边框、背景色等显性样式，看起来和高度塌陷的效果一致。

给.card添加flex拉伸属性，让卡片可以自动分配flex容器的剩余宽度即可，参考修改后的CSS：

.card {
  height: 100%;
  /* 核心修复：允许卡片自动分配容器剩余宽度 */
  flex: 1;
  /* 可选：设置最小宽度，避免卡片被完全压缩 */
  min-width: 60px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  background-repeat: no-repeat;
  position: relative;
  /* 可选：添加过渡实现展开动画效果 */
  transition: flex 0.3s ease;
  cursor: pointer;
}
.card-name {
  bottom: 20px;
  left: 20px;
  position: absolute;
  color: #fff;
  margin: 0;
  /* 可选：默认隐藏文字，激活卡片时再显示 */
  opacity: 0;
  transition: opacity 0.2s ease 0.2s;
}
/* 激活状态的卡片样式 */
.card.active {
  flex: 5;
}
.card.active .card-name {
  opacity: 1;
}
.cards-container {
  height: 90vh;
  display: flex;
  /* 可选：给卡片之间添加间距 */
  gap: 16px;
}

后续只要给点击的卡片动态添加active类名，就能实现常见的展开卡片交互效果。

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