title: Dynamic width for absolute div with smaller parent?
body: <p>I want to be able to display extended data into an absolute popup after clicking a button, but I don't know the size of the content in advance and I also want the content to take the maximum space possible before wrapping.</p>
  <p>Here is a fiddle of my case, it seems the popup never goes above his parent size, works if I replace &quot;max-width&quot; with &quot;width&quot; in my vectors class but I'm not sure why this is the case</p>
  <p><a href="https://jsfiddle.net/vf6j9geh/5/" rel="nofollow noreferrer">https://jsfiddle.net/vf6j9geh/5/</a></p>
  <p>expected result:
  <a href="https://i.stack.imgur.com/EDTux.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EDTux.png" alt="enter image description here" /></a></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-js lang-js prettyprint-override"><code>document.getElementById('openFewBtn').addEventListener('click', function(){ 
      document.getElementById('few-vectors').classList.add('visible'); 
  });
  
  document.getElementById('openManyBtn').addEventListener('click', function(){ 
      document.getElementById('many-vectors').classList.add('visible'); 
  });
  
  // Close popup
  document.getElementById('many-vectors').addEventListener('click', function(){ 
      document.getElementById('many-vectors').classList.remove('visible'); 
  });
  document.getElementById('few-vectors').addEventListener('click', function(){ 
      document.getElementById('few-vectors').classList.remove('visible'); 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vectors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 100px;
    max-width: 500px;
    background-color: #333;
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .vector {
    display: flex;
    padding: .35rem;
    background-color: #c0c0c0;
  
    &amp;:not(:last-child) {
      margin-right: .5rem;
    }
  }
  
  .popup {
    display: none;
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 5px;
  }
  
  .main {
    position: relative;
    display: flex;
  }
  
  .col {
    width: 33%;
    position: relative;
    text-align: center;
  }
  
  .visible {
    display: block;
  }
    
  .grey {
    background-color: #d1d1d1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="col"&gt;
      &lt;button id="openFewBtn"&gt;Open few&lt;/button&gt;
    
      &lt;div class="popup" id="few-vectors"&gt;
        &lt;div class="vectors" &gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="col grey"&gt;
      &lt;br /&gt;&lt;br /&gt;
    &lt;/div&gt;
    
    &lt;div class="col"&gt;
      &lt;button id="openManyBtn" &gt;Open many&lt;/button&gt;
    
      &lt;div class="popup" id="many-vectors"&gt;
        &lt;div class="vectors"&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
          &lt;div class="vector"&gt;
            Random text
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>