仅用CSS实现动态缺失数据时的Div间距调整可行吗？

需求背景 #

我需要实现一个卡片组件：左侧是图片，右侧包含多行内容。具体要求：

• 仅标题行必存在，其他行（如副标题、描述、元信息等）可能缺失
• 标题文本可能过长，需支持溢出截断显示
• 当标题下方的行缺失时，标题尽可能占用右侧所有空余空间，同时保持溢出功能正常
• 当所有行都存在时，各行高度必须一致

核心问题 #

仅通过CSS能否实现上述效果？

尝试过的方案及问题 #

1. Grid布局方案：给.title添加grid-row-end:lastRow，虽然实现了空余空间分配，但破坏了文本溢出规则，过长的标题会直接覆盖下方其他元素。
2. 基础Flex布局方案：给所有元素设置flex-grow:1，空元素设flex-grow:0。但这种方式在缺失行时，剩余元素会均分空余空间，无法让标题独占所有空余空间。

最终可行的Flexbox优化方案 #

通过对Flex布局的细节调整，可以完美满足需求，具体实现思路：

• 给右侧内容容器的所有子元素设置min-height为字体基础高度，确保元素存在时至少有正常行高；空元素重置min-height:0避免无效占位
• 标题行设置flex-grow:2，其他行设flex:1 1 auto，让标题在有空余空间时优先占满
• 给所有行添加max-height:25%（假设右侧共4行：标题+3个可选行），保证所有行存在时高度一致；通过:has选择器移除空元素的max-height限制，避免空元素占用空间

完整代码示例

<div class="card">
  <div class="card-image">
    <img src="https://picsum.photos/150/200" alt="Card image">
  </div>
  <div class="card-content">
    <div class="title">这是一段可能非常长的标题文本，用来测试溢出效果当内容过多时会自动截断显示省略号，确保在空间不足时不会影响布局</div>
    <div class="subtitle">副标题（可选）</div>
    <div class="description">描述内容（可选）</div>
    <div class="meta">2024-05-20</div>
  </div>
</div>

<!-- 测试缺失行的情况 -->
<div class="card">
  <div class="card-image">
    <img src="https://picsum.photos/150/200?2" alt="Card image">
  </div>
  <div class="card-content">
    <div class="title">这是一段仅存在标题的卡片，标题会占满右侧所有空余空间，同时文本过长时正常溢出</div>
    <div class="subtitle"></div>
    <div class="description"></div>
    <div class="meta"></div>
  </div>
</div>

.card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  width: 500px;
  border: 1px solid #e5e7eb;
  padding: 16px;
  margin-bottom: 20px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

/* 基础行高与溢出设置 */
.card-content > * {
  min-height: 1.5em; /* 根据实际字体大小调整 */
  max-height: 25%; /* 4行布局时每行占比 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 可自定义允许显示的行数 */
  -webkit-box-orient: vertical;
}

/* 空元素不占用高度 */
.card-content > :empty {
  min-height: 0;
}

/* 移除空元素的最大高度限制 */
.card-content:has(.subtitle:empty) .subtitle,
.card-content:has(.description:empty) .description,
.card-content:has(.meta:empty) .meta {
  max-height: 0;
}

/* 标题优先占用空余空间 */
.title {
  flex-grow: 2;
  font-size: 1.25rem;
  font-weight: 600;
}

.subtitle, .description, .meta {
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: #6b7280;
}

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