如何使副标题宽度匹配标题？CSS Flex/Grid实现方案咨询

问题描述 #

现有包含标题与副标题的组件结构，容器为纵向Flex布局：

<div class='container'>
    <h1 class='title'>This is a long title</h1>
    <div class='subtitle'>explanation with width longer than the title</div>
</div>

当前副标题会撑满容器宽度，期望实现副标题最大宽度与标题宽度完全一致，超出部分自动换行。

解决方案 #

方法1：使用Flex布局实现 #

核心是让容器宽度由标题内容决定，同时限制副标题的宽度范围：

.container {
  display: flex;
  flex-direction: column;
  /* 容器宽度自适应标题内容，而非撑满父容器 */
  width: fit-content;
}

.subtitle {
  /* 超出宽度自动换行 */
  word-wrap: break-word;
  /* 可选：避免副标题被拉伸，对齐标题左侧 */
  align-self: flex-start;
}

方法2：使用Grid布局实现 #

Grid可以更简洁地实现该效果，利用网格列宽度由标题内容决定，副标题自动继承列宽：

.container {
  display: grid;
  /* 网格列宽度适配标题内容 */
  grid-template-columns: fit-content;
}

.subtitle {
  word-wrap: break-word;
}

原理说明 #

两种方案的核心逻辑一致：让容器的宽度由标题的实际内容宽度来定义，副标题作为容器的子元素，会被容器的宽度限制，从而自动换行，实现与标题宽度匹配的效果。

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