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

Question

我正在尝试实现如下工作的 flexbox 布局：

一个 flex-direction: row 的 flexbox 容器包含两个 children.
parent 的大小应仅能容纳 children（通过 display: inline-flex 实现）。
children 包含不同长度的文本，不换行（即全部在一行）。
children的宽度应该是完全一样的，也就是两个文本中最宽的那个宽度。这个很重要，并排除 flex-basis: auto 的使用，因为这会导致两个文本的长度不同而不是完全相同。

为了使 children 的宽度完全相同，由两者中最大的一个决定，我使用 flex: 1 0 0px。

布局完全符合预期，除了文本似乎只增长到宽度 ，就好像它没有 white-space: nowrap 一样！来自 this codepen that I've created 的以下屏幕截图说明了问题：

有什么方法可以在不换行的情况下实现这种确切的行为吗？我知道我可以做一些事情，比如添加固定宽度，但我想知道这是否可以使用 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

无法与 flex-grow 一起使用，因为此功能在线免费分发 space。

这意味着较长的文本项目将首先消耗较短项目中的空闲 space，然后容器才能展开。这会破坏您正在寻找的等宽布局。

换句话说，flex-grow: 1 应用于两个项目，将在它们之间平均分配免费 space。但是，内容越长，免费的越少space，flex-grow不能如你所愿。它只能创建具有 flex-basis: 0 和足够自由 space.

的等宽项目

与网格相同的问题：使用免费space。

我不认为这种布局可以用flex-grow或fr来实现。您将需要另一个 CSS 方法或 JS。

Answer 2

这个有用吗？ https://codepen.io/cheapsteak/pen/qBrPVda

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

<style>
.parent {
  margin-bottom: 60px;
}

.child {
  padding: 20px;
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  min-width: max-content;
}

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

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

.right {
  background-color: #e7cc89;
}
</style>

Answer 3

我在你提供的 codepen 中试过，最后添加了以下内容，不确定是不是你的 meant/wanted:

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>

child 用 CSS 控制 parent 或它的兄弟姐妹总是很棘手，我认为我们在这个方面要么是 hacky 要么是幸运的......（如果完全就是你的意思）

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

`white-space: nowrap` inside flex container only grows to width of text as if it were wrapped

css

nowrap

flexbox

css-grid