title: CSS nested flexbox why is last word wrap when there is space?
body: <p>I have a nested flex container. Here is the code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;parent-container&quot;&gt;
    &lt;div class=&quot;child-container&quot;&gt;
      &lt;span class=&quot;color-block&quot;&gt;&lt;/span&gt;
      &lt;span&gt;This is a long long long long long text.&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.parent-container {
    display: flex;
    background: orange;
  }
  
  .child-container {
    display: flex;
    background: green;
  }
  
  .color-block {
    background: yellow;
    flex: 0 0 15px;
    align-self: stretch;
  }
  </code></pre>
  <p>Look at the result at <a href="https://codepen.io/crupest/pen/Lqwxpp" rel="nofollow noreferrer">https://codepen.io/crupest/pen/Lqwxpp</a>.</p>
  <p>This is the least code that reproduces my problem. Of course there are other elements in parent container.</p>
  <p>My question is that why the last word &quot;text&quot; wraps even when there is remaining space at right? And how to make it not wrap? Or is there any workaround?</p>
  <p>Thanks!</p>
  <hr />
  <h1>Update:</h1>
  <p>My purpose is that I want a color label in front of the text.</p>
  <p>Thanks for @Kata Csortos pointing out that I need to say my purpose.</p>