Как я могу иметь содержимое автоблокировки во flexbox, не разрушая макет? (занять как можно больше места и как можно меньше места)

Question

У меня есть пример на JSFiddle о том, как я хочу решить мою проблему с flexbox: я хочу, чтобы левый столбец соответствовал ширине в соответствии с содержимым - разбить строку, если текст слишком длинный. К сожалению, это всегда занимает как можно меньше места, что приводит к нарушению макета.

У меня есть скрипка ниже, сначала вы видите два блока с тем, как он выглядит сейчас, ниже вы видите 2 блока, как я хочу это Похоже (я определил фиксированную ширину по визуальным причинам, но я хочу, чтобы она была динамически с flexbox, очевидно).

Я почти уверен, что могу сделать это легко, но я не могу видеть лес для деревьев. Любая помощь высоко ценится:)

.flex {
  display: flex;
  background: #333;
  max-width: 380px;
}

.first {
  flex: 0;
  background: #666;
}

.second {
  flex: 1;
  background: #999;
}

<p>How it looks like with my flexbox approach</p>

<div class="flex">
  <div class="first">
    Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>

<br />

<div class="flex">
  <div class="first">
    Here is my Dynamic Text Here is my Dynamic Text 
  </div>
  <div class="second">
    Next to Text
  </div>
</div>

<hr />
<p>How it should look like</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
  <div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
  <div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
  <div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
  <div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>

Answer 1

Используйте white-space:nowrap на втором элементе, чтобы он не разрушался.

  .flex {
  display: flex;
  border: 1px solid green;
}

.first {
  background: lightblue;
  border: 1px solid grey;
}

.second {
  white-space: nowrap;
  background: lightgreen
}

.narrow {
  width: 50%;

<div class="flex">
  <div class="first">
    Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>
<hr/>


<div class="flex narrow">
  <div class="first">
    Here is my Dynamic Text Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>