更新：

Question

我有一个嵌套的flex容器。这是代码：

<div class="parent-container">
  <div class="child-container">
    <span class="color-block"></span>
    <span>This is a long long long long long text.</span>
  </div>
</div>

.parent-container {
  display: flex;
  background: orange;
}

.child-container {
  display: flex;
  background: green;
}

.color-block {
  background: yellow;
  flex: 0 0 15px;
  align-self: stretch;
}

在https://codepen.io/crupest/pen/Lqwxpp查看结果。

这是最能重现我的问题的代码。当然，父容器中还有其他元素。

我的问题是，即使右边有剩余空间，为什么最后一个单词“ text”也要换行？以及如何使其不包裹？还是有任何解决方法？

谢谢！

更新：

我的目的是要在文本前面添加颜色标签。

感谢@Kata Csortos指出我需要说出我的目的。

Answer 1

JsFiddle

physical path

您为什么不尝试使用上面的代码呢？将Public Function Index() As ActionResult Dim routes As New RouteCollection With {.RouteExistingFiles = True} Return View() End Function删除到<style name="MyTabLayout" parent="Widget.Design.TabLayout"> <item name="tabGravity">fill</item> <item name="tabMaxWidth">0dp</item> </style>，然后添加<android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabMode="fixed" />

Answer 2

使用whitespace: nowrap;在同一行中展开

.child-container {
    display: flex;
    background: green;
    white-space: nowrap;
}

Answer 3

您的目标是什么，应该是什么样？例如，如果您将跨度放在具有flex显示功能的另一个div中，并在其上加上填充，则文本不会自动换行。

HTML

<div class="parent-container">
  <div class="child-container">
    <div class="color-block">
      <span>This is a long long long long long text.</span>
    </div>
  </div>
</div>

CSS

.parent-container {
  display: flex;
  background: blue;
}

.child-container {
  display: flex;
  padding-left: 20px;
  background: green;
}

.color-block {
  background: yellow;
  padding: 5px 10px;
  align-self: stretch;
  display: flex;
}

还使用:: before伪元素制作了更好的版本，请在此处查看： https://jsfiddle.net/de6n1sr7/

CSS嵌套的flexbox在有空间时为什么要自动换行？

更新：

3 个答案: