CSS布局求助：如何让容器适配文本宽度并实现居中左对齐？

需求说明 #

• 外层容器居中展示，内部文本保持左对齐
• 子容器#introduction-child需自动适配文本宽度，且最大宽度限制为80vw
• 修改文本字号时，容器宽度需同步变化
• 文本宽度超过80vw换行后，子容器宽度适配换行后的文本宽度

解决方案 #

修改CSS代码如下：

#introduction {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 避免子容器被垂直拉伸 */
  background-color: grey;
  min-height: 100vh; /* 适配内容高度，避免内容溢出 */
  width: 100vw;
}

#introduction-child {
  overflow-wrap: break-word;
  max-width: 80vw;
  width: fit-content; /* 核心：让容器宽度适配内容 */
  background-color: #80b0ff;
  margin-top: 28vh;
}

#introduction h2 {
  font-size: 1.8em;
  margin: 0.5em 0; /* 可选：优化标题间距 */
}

HTML代码保持不变：

<div id="introduction">
  <div id="introduction-child">
    <h2>Max Mustermann</h2>
    <h2>Lorem ipsum dolor sit amet, consectetur ad</h2>
    <h2>Lorem amet, consectetur ad</h2>
  </div>
</div>

关键改动说明 #

1. width: fit-content：给子容器添加这个属性是核心，它让容器宽度自动匹配内部文本的宽度，同时受max-width: 80vw限制——当文本宽度超过80vw时，容器会自动换行，并适配换行后的文本宽度；修改字号时，容器宽度也会同步调整。
2. align-items: flex-start：避免子容器被flex布局垂直拉伸，保持自身高度适配内容。
3. min-height: 100vh：替代原有的height: 100vh，确保当内容高度超过视口时，容器能自动扩展，避免内容溢出。

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