强制对子 div 进行内部换行

Question

我的设计包含动态生成的行，其中包含公司名称、简短状态和一组导航按钮。我正在尝试配置 CSS 以确保状态和导航按钮保持不换行，如果需要，还包括要换行的公司名称。

.row {
  background: #ececec;
  margin: 20px;
  padding: 5px;
  width: 100%;
}

.name {
  background-color: red;
  width: auto !important;
  line-height: 2.5em;
  display: block;
  float: left;
}

.status {
  color: white;
  padding: 3px;
  background-color: blue;
  margin-left: 1em;
  white-space: nowrap;
}

.nav {
  background-color: #ddd;
  width: 400px;
  display: block;
  text-align: right;
  position: relative;
  float: right;
}

<div class="row">
  <div class="name">Kind of a long silly name but you know how that is
    <span class="status"> Status can be a pain</span>
  </div>
  <div class="nav">
    Navigation
  </div>
</div>

JSFiddle example

理想情况下，我们希望 'name' 中的内容能够包含在较小的浏览器中。

下面是我们希望代码执行的简要说明：

目前，按照编码，当窗口变窄时，导航 div 在名称 div 下滑动。尝试过浮动，位置：绝对，位置：固定...我知道答案就在某处，但我无法找出正确的组合。

导航不是固定宽度（与此示例不同），因为链接的存在以及哪些链接取决于其他地方的代码。

如果重要的话，我们使用的是 Bootstrap 3.3.7 和 jQuery 3.3.1。

Answer 1

您必须使用 flex-box 来执行此操作：

.row {
  background: #ececec;
  margin: 0;
  padding: 5px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.name {
  background-color: red;
  width: auto !important;
  line-height: 2.5em;
  flex: 1 1 auto;
  justify-content: space-between;
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
}

.status {
  color: white;
  padding: 3px;
  background-color: blue;
  margin-left: 1em;
  white-space: nowrap;
}

.nav {
  background-color: #ddd;
  text-align: right;
  position: relative;
  flex: 1 0 auto;
}

<div class="row">

  <div class="name">Kind of a long silly name but you know how that is
    <span class="status"> Status can be a pain</span>
  </div>

  <div class="nav">
    Navigation Navigation Navigation Navigation
  </div>

</div>

这是一个可以玩的小提琴： https://jsfiddle.net/tfqek0nx/2/