如何让内层div控制外层div宽度，实现长文本自动换行

要实现外层div宽度由内层flex容器决定，同时让长文本自动换行（无需固定宽度），可以通过以下两种方法实现：

方法一：使用display: table #

给.outer添加display: table，table元素的宽度会由内部最宽的子元素（即.inner）决定，内部长文本会自动在这个宽度内换行。

修改后的CSS代码：

.outer {
  padding: 10px;
  background-color: #cdcdcd;
  display: table; /* 关键属性 */
}

.inner {
  padding: 10px;
  background-color: #fff;
  display: flex;
}

.box {
  height: 40px;
  width: 80px;
  background-color: red;
  margin: 10px;
}

方法二：使用CSS Grid #

给.outer设置display: grid，Grid容器的宽度默认由内容（这里是.inner）决定，内部长文本元素会自动占满Grid容器宽度并换行。

修改后的CSS代码：

.outer {
  padding: 10px;
  background-color: #cdcdcd;
  display: grid; /* 关键属性 */
}

.inner {
  padding: 10px;
  background-color: #fff;
  display: flex;
}

.box {
  height: 40px;
  width: 80px;
  background-color: red;
  margin: 10px;
}

原理说明 #

• 两种方法均让.outer的宽度由内部最宽子元素（.inner）动态决定，避免被长文本拉伸。
• .inner作为flex容器，宽度由内部.box的数量和尺寸自动计算，.outer会自适应这个宽度，同时内部长文本会在该宽度范围内自动换行。

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