html - 如何在其宽度内适应 CSS flex 内容？

Question

我有 3 个DIV组件，其中：

• .child-left: 将其内容在屏幕左侧对齐
• .child-center: 将其内容与屏幕中心对齐
• .child-right: 将其内容与屏幕右侧对齐

但是，当内容（或文本）变得非常长时.child-center，即使它有自己的内容，内容也会相互溢出width。请看下面的截图：

我想知道：

1. 为什么里面的内容（Long text...）.child-center不适合宽度？
2. 如何通过最小的更改来解决问题？（我想继续使用display: flex，我不想使用text-align: center）

我想要实现的是：

请帮帮我！

代码：

.parent {
  display: flex;
  align-items: center;
  width: 100%;
}

.child-left {
  display: flex;
  justify-content: flex-start;
  width: 20%;
  background-color: green;
  white-space: nowrap;
}

.child-center {
  display: flex;
  justify-content: center;
  width: 60%;
  background-color: red;
  white-space: nowrap;
}

.child-right {
  display: flex;
  justify-content: flex-end;
  width: 20%;
  background-color: yellow;
  white-space: nowrap;
}

<div class="parent">
  <div class="child-left">
    <span>11111111111111111111111111</span>
  </div>
  <div class="child-center">
    <span>Long text Long text Long text Long text Long text Long text Long text Long text Long text</span>
  </div>
  <div class="child-right">
    <span>22222222222222222222222222</span>
  </div>
</div>

标签： htmlcssflexbox