Dynamic width for absolute div with smaller parent?

Question

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.

Here is a fiddle of my case, it seems the popup never goes above his parent size, works if I replace "max-width" with "width" in my vectors class but I'm not sure why this is the case

https://jsfiddle.net/vf6j9geh/5/

expected result:

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'); 
});

.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;

  &: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;
}

<div class="main">
  <div class="col">
    <button id="openFewBtn">Open few</button>
  
    <div class="popup" id="few-vectors">
      <div class="vectors" >
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
      </div>
    </div>
  </div>
  
  <div class="col grey">
    <br /><br />
  </div>
  
  <div class="col">
    <button id="openManyBtn" >Open many</button>
  
    <div class="popup" id="many-vectors">
      <div class="vectors">
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
        <div class="vector">
          Random text
        </div>
      </div>
    </div>
  </div>
</div>