Принудительная внутренняя упаковка для дочернего элемента 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

В идеале, мы хотели бы, чтобы содержимое в «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/