CSS如何防止子元素撑宽父容器 用flexbox实现首子元素决定父宽度

Flexbox 实现（兼容性好） #

核心思路是让第二个子元素不参与容器的宽度计算，强制其宽度匹配由第一个子元素撑开的容器宽度，超出内容自动换行。
对应CSS代码如下：

.container {
  display: flex;
  flex-direction: column;
  /* 让容器宽度收缩到适配内容的尺寸，默认由第一个子元素决定 */
  width: fit-content;
  /* 可选：加边框方便观测容器边界 */
  border: 1px solid #eee;
}

.second {
  /* 核心配置：第二个子元素自身宽度不纳入容器宽度的计算逻辑 */
  width: 0;
  /* 强制子元素填满容器当前宽度 */
  min-width: 100%;
  /* 可选：长单词、连续字符也可以自动换行 */
  word-break: break-all;
}

搭配你提供的HTML结构即可生效：

<div class="container">
  <div class="first">this determines the container width</div>
  <div class="second"> if this is too long, it wraps around</div>
</div>

更简洁的Grid实现 #

如果不需要兼容IE等老旧浏览器，Grid方案代码更精简：

.container {
  display: grid;
  width: fit-content;
}
.second {
  width: 0;
  min-width: 100%;
  word-break: break-all;
}

效果说明 #

• 第一个子元素的内容宽度完全决定容器的总宽度
• 第二个子元素内容超过容器宽度时自动换行，不会撑大容器
• 无需预先设置任何元素的固定宽度，完全自适应内容

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