如何让Flexbox容器中多内容元素换行后与其他元素同宽

要达成你要的效果，关键是让容器的宽度由正常子元素的最大内容宽度决定，再让目标子元素占满容器宽度，自然触发内容换行。具体修改如下：

1. 给flex容器加上 align-items: flex-start：这会让所有子元素默认宽度自适应自身内容，容器的宽度会由前两个.child里最宽的那个来决定，不会被长文本的.wrapped-child撑开。
2. 给.wrapped-child设置 align-self: stretch：强制这个子元素的宽度拉满容器，这样里面的长文本就会自动换行，宽度和其他子元素保持一致。
3. 删掉.child的flex-grow: 1：这个属性在垂直flex容器里控制的是垂直方向的高度拉伸，对宽度没有任何作用，留着没用。

修改后的完整代码：

body {
  display: flex;
  justify-content: center;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container,
.container > div {
  border: 1px solid grey;
  padding: 5px;
}
.container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start; /* 让子元素宽度自适应内容，容器宽度由最宽子元素决定 */
}

.wrapped-child {
  align-self: stretch; /* 占满容器宽度，内容自动换行 */
}

<div class="container">
  <div class="child">Some content</div>
  <div class="child">
    <div>
      Some fancy content
    </div>
    <div>Some more</div>
  </div>
  <div class="wrapped-child">
    <p>
      Here comes bunch of content that takes the most width but has to be
      multiline
    </p>
  </div>
</div>

简单说下原理：

• 垂直flex容器默认的align-items: stretch会让所有子元素宽度占满容器，但改成flex-start后，子元素宽度只由自身内容决定，容器宽度跟着最宽的子元素走。
• 给目标子元素单独设置align-self: stretch，让它打破默认规则，宽度拉到容器的最大宽度，长文本因为宽度受限就会自动换行，完美匹配其他子元素的宽度。

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