Is there a way to create an element that adjusts its size based on the content using only CSS rules?
Consider this example:
ul {
list-style: none;
padding: 1rem 1rem 1rem 0;
background-color: lightblue;
max-height: 300px;
display: inline-flex;
flex-flow: column wrap;
align-items: flex-start;
width: 238px;
}
ul li {
width: 100px;
border: 1px solid red;
margin-left: 1rem;
}
/* HTML */
<ul>
<li>item</li> // repeated n times
</ul>
Check out this code snippet
The desired outcome should be similar to:
this image