强制对子div进行内部包装

Question

我的设计包含动态生成的行，这些行包含公司名称，简短状态和一组导航按钮。我正在尝试配置CSS，以确保状态和导航按钮保持为nowrap，并在需要时提供要包装的公司名称。

.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

理想情况下，我们希望将“名称”中的内容包装在较小的浏览器中。

以下是我们希望代码执行的快速草图：

当前，按照编码，当窗口变窄时，导航div会以div的名称滑动。尝试过浮动，position：absolute，position：fixed ...我知道答案在某处，但是我找不到正确的组合。

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

如果有关系，我们将使用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/