flex 容器内的 `white-space: nowrap` 只增长到文本的宽度，就好像它被包裹一样

Question

我正在尝试实现一个 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 to wrap, we see that the two sides grow correctly to the same width as the larger text</p>
<div class="parent">
  <div class="child left">This is some short text</div>
  <div class="child right">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<p>In the second example, where the text is forced onto a single line by
  <pre>white-space: nowrap; overflow: hidden;</pre> we see that the boundaries grow to the size that the wrapped text would occupy, even though it's all on one line.</p>
<div class="parent">
  <div class="child left nowrap">This is some short text</div>
  <div class="child right nowrap">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<p>
  How can we get the same behaviour as the first example (both sides growing to exactly the size of the larger content) while keeping the text on the same line?
</p>

Answer 1

我在您提供的 codepen 中尝试并最终添加了以下内容，不确定这是否是您的意思/想要的：

HTML

<div class="grid">
  <div class="child left">This is some short text</div>
  <div class="child right">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

CSS

.grid {
  /* choose one of these below depending whether you want it (the parent) take the full width */
  display: inline-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* choose one of these below depending whether you want it overflowing horizontally */
  width: fit-content;
  width: max-content;
}

完整演示：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: max-content;
}

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

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

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

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

.right {
  background-color: #e7cc89;
}

<h2>Answer</h2>

<div class="grid">
  <div class="child left">This is some short text</div>
  <div class="child right">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<h2>Question</h2>

<p>In the first example, when the text is allowed to wrap, we see that the two sides grow correctly to the same width as the larger text</p>
<div class="parent">
  <div class="child left">This is some short text</div>
  <div class="child right">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<p>In the second example, where the text is forced onto a single line by
  <pre>white-space: nowrap; overflow: hidden;</pre> we see that the boundaries grow to the size that the wrapped text would occupy, even though it's all on one line.</p>
<div class="parent">
  <div class="child left nowrap">This is some short text</div>
  <div class="child right nowrap">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<p>
  How can we get the same behaviour as the first example (both sides growing to exactly the size of the larger content) while keeping the text on the same line?
</p>

对于孩子来说，用 CSS 控制父级或它的兄弟姐妹总是很棘手，我认为我们对这个要么很笨要么很幸运......（如果这就是你的意思）