display: flex容器仅继承图片高度，添加文本后内容溢出如何解决？

问题根因 #

溢出的核心原因是两个样式配置冲突：

1. 你给.attraction-card下的图片设置了height: 100%，但父容器.attraction-card没有固定高度，flex布局的stretch属性会先让所有卡片高度对齐，图片按父容器总高度渲染，再叠加顶部的标题、文本高度，最终总高度超出容器。
2. .attraction-card没有设置纵向布局规则，无法自动分配文本和图片的高度空间。

修复方案 #

修改对应CSS即可，无需改动HTML结构：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.book-right-side {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.attraction-card {
  width: 100%;
  /* 新增：将卡片改为纵向flex布局，自动分配内部元素空间 */
  display: flex;
  flex-direction: column;
}

.book-right-side img {
  border-radius: 12px;
  width: 100%;
  /* 删除原有height: 100%，新增以下两行 */
  flex: 1; /* 图片占满文本之外的剩余高度 */
  object-fit: cover; /* 保证图片比例不变，裁剪多余部分 */
}

修改后所有卡片高度会自动对齐，图片不会溢出，同时文本区域高度也会被正常计入容器总高度。

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