小编mam*_*zie的帖子

我正在尝试实现一个 flexbox 布局，其工作方式如下：

• 一个flex-direction: row包含两个子项的flexbox 容器。

• 父级的大小应仅与容纳子级所需的一样大（通过 实现display: inline-flex）。

• 子项包含不同长度的文本，不换行（即全部在一行上）。

• 孩子的宽度应该完全相同，这是两个文本中最宽的宽度。这非常重要，并且排除了 的使用flex-basis: auto，因为这将导致两个文本的长度不同而不是完全相同。

为了使孩子的宽度完全相同，由两者中的最大者决定，我使用flex: 1 0 0px.

布局完全按预期工作，除了文本似乎只增长到宽度，好像它没有white-space: nowrap! 我创建的这个 codepen的以下屏幕截图说明了这个问题：

有没有办法在没有换行的情况下实现这种确切的行为？我知道我可以做一些类似添加固定宽度的事情，但我想知道这是否可以使用 flexbox 动态实现（始终增长到任意文本的正确宽度）。

谢谢

.parent {
  display: inline-flex;
  margin-bottom: 60px;
}

.child {
  flex: 1 0 0px;
  padding: 20px;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
}

.left {
  background-color: #89e7dc;
}

.right {
  background-color: #e7cc89;
}

<p>In the first example, when the text is allowed …