如何实现文本无法容纳时包含文本的div自动扩展

嘿，我来帮你搞定这个文本溢出的问题！从你的代码来看，核心问题出在text-box的flex布局默认行为上——默认的flex-direction: row会让里面的<p>标签尝试在一行展示，哪怕文本很长也不会自动换行，导致容器无法扩展高度来适配内容。下面给你两种针对性的解决方案，根据你的需求选就行：

方案1：让文本自动换行，容器高度随内容扩展（最常见的消息气泡场景） #

这是聊天类应用最常用的方式，文本过长时自动换行，容器高度跟着内容增高。只需要调整text-box的flex方向，或者直接改用块级布局：

方法A：调整flex布局方向 #

修改你的CSS：

.text-box {
  display: flex;
  flex-direction: column; /* 新增：让子元素纵向排列 */
  margin-left: 10px;
}

为什么这样有效？
默认的flex-direction: row会强制子元素（这里是<p>）在同一行显示，哪怕文本溢出。改成column后，<p>标签会占满容器的整行宽度，文本自然会自动换行，容器的高度也会跟着内容自动扩展。

方法B：改用块级布局（更简单，如果你不需要flex的其他特性） #

如果你只是需要左外边距和文本适配，完全可以去掉flex布局，用块级元素的默认行为：

.text-box {
  display: block; /* 替换flex为block */
  margin-left: 10px;
}

块级元素的默认行为就是宽度占满父容器（或者根据内容调整），高度随内部文本自动扩展，<p>标签作为块级子元素也会自动换行，完美适配你的需求。

方案2：让文本不换行，容器宽度横向扩展（特殊场景） #

如果你的需求是文本不换行，容器宽度跟着文本长度自动拉伸，那可以这样设置：

.text-box {
  display: flex;
  margin-left: 10px;
  width: fit-content; /* 宽度完全适配文本内容 */
  white-space: nowrap; /* 强制文本不换行 */
}

同时，要确保父容器.message-body.row不会限制子元素的宽度（如果它是flex布局的话）：

.message-body.row {
  display: flex;
  flex-wrap: nowrap; /* 禁止父容器换行，允许子元素横向扩展 */
}

额外检查项 #

如果做完上面的修改还是有问题，检查下有没有这些情况：

• 是不是给某个父容器设置了固定高度或者overflow: hidden？如果有的话要去掉，否则容器无法自动扩展。
• <p>标签有没有被设置了white-space: nowrap？如果有，改成white-space: normal（默认值）就行。

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