title: Setting wrapper div to position absolute shrinks wrapper to arbitrary width
body: <p>I'm running into an issue with <code>position: absolute</code> and I can't find an answer anywhere that explains why it's happening.</p>
  <p>I have a flexbox container inside a wrapper with two children that are each set to <code>flex-basis: 50%</code>. When I set <code>position: absolute</code> on the wrapper div, the wrapper shrinks in an unpredictable way.</p>
  <p>See the code below:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer-wrapper {
    position: relative;
    width: 100%;
  }
  .outer-wrapper .wrapper {
    position: absolute;
  }
  .outer-wrapper .wrapper .flex-container {
    display: flex;
  }
  .outer-wrapper .wrapper .flex-container .flex-item {
    flex-basis: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer-wrapper"&gt;
  
    &lt;div class="wrapper"&gt;
  
      &lt;div class="flex-container"&gt;
  
        &lt;div class="flex-item"&gt;
           Some Text That Is Long
        &lt;/div&gt;
  
        &lt;div class="flex-item"&gt;
           Some Text
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="flex-container"&gt;
  
        &lt;div class="flex-item"&gt;
           Some Text
        &lt;/div&gt;
  
        &lt;div class="flex-item"&gt;
           Some Text
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Removing line 6 in the CSS causes the flex-container to expand to the full width of the parent and each flex child takes up 50% of the width, as expected. However, when I set the wrapper div to <code>position: absolute</code>, the wrapper div shrinks to what seems like an arbitrary width and the text in the flex-children breaks onto multiple lines.</p>
  <p>My questions:</p>
  <ul>
  <li>Why does setting <code>position: absolute</code> on the wrapper div cause the wrapper div to shrink smaller than its content?</li>
  <li>How does the browser determine what width to shrink the wrapper div to? It seems to me like it would either shrink to be as small as possible without introducing line breaks into the text, or would shrink as small as possible while still fitting the longest word, but instead it's shrinking to somewhere in the middle (it only introduces one line break in a string of short words).</li>
  <li>Is there a way, while still using flexbox and <code>position: absolute</code> in this way, to force the browser to not shrink the wrapper smaller than its content (unless there is a max-width set on the wrapper)?</li>
  </ul>
  <p>Really appreciate any help! This has been driving me crazy!</p>