ul & li - dynamic width with multi-column and absolute position

Question

We have the following code: We want the parent UL to be of the maximum width based on the longest text in the LI. Currently there is max-width that limits the width of the ul, but if we change it to 100% then it will be the size of the whole screen. We need it to fit the content and still have 2 columns.

ul{
position: absolute;
  margin-top: 18px;
  font-size: 15px;
  column-width: auto;
  column-count: 2;
  max-width: 160px;
  z-index: 20;
  color: rgb(109, 113, 107);
  box-shadow: rgb(162, 151, 151) 3px 3px 10px;
  cursor: pointer !important;
  list-style: none;
  background: rgb(255, 255, 255);
  padding: 10px 12px;
}

ul li{
    display: inline-block;
    width: 100%;
    padding: 2px;
}

<div id="testDiv">
  
  <ul>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>This is very long text</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
  
  </ul>


</div>

Answer 1

I replace column-width by display:grid.

ul{
  position: absolute;
  margin-top: 18px;
  font-size: 15px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0 2em;
  max-width : 100%;
  z-index: 20;
  color: rgb(109, 113, 107);
  box-shadow: rgb(162, 151, 151) 3px 3px 10px;
  cursor: pointer !important;
  list-style: none;
  background: rgb(255, 255, 255);
  padding: 10px 12px;
}

ul li{
    display: inline-block;
    width: 100%;
    padding: 2px;
}

<div id="testDiv">
  
  <ul>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>This is very long text</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
  
  </ul>


</div>