Here is a code snippet that we are working with: Our goal is to have the parent UL element adjust its width based on the longest text in the LI elements. The current max-width property limits the ul's width, but changing it to 100% would make it expand to the full screen size. We need it to dynamically fit the content while still maintaining two 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>