title: Text in flex item must wrap, not shift sibling and expand container
body: <p>I need to fix the position of a flex container that contains two items: a yellow circle and some text.</p>
  
  <p>When I add more text to the <code>p</code> element, the yellow circle shifts to the left. But I need the circle to hold its position. The text element should not expand; it should wrap. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex {
    display: flex;
    align-items: center;
    position: absolute;
    right: 14%;
    top: 15%;
  }
  .flex .item {
    position: relative;
    width: 5rem;
    height: 5rem;
    background: yellow;
    border-radius: 50%;
  }
  .flex .item span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 25px;
    transform: translate(-50%, -50%);
  }
  .flex p {
    margin-left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
    &lt;div class="item"&gt;
      &lt;span&gt;9&lt;/span&gt;
    &lt;/div&gt;
    &lt;p&gt;Text here&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a <a href="http://codepen.io/palaniichukdmytro/pen/WoOMYB?editors=1100" rel="nofollow noreferrer"><strong>codepen</strong></a>.</p>