Consider the following HTML and CSS, I would like to increase the width of .responsive-list to 100% if the width of the any of the children (content) is greater than 50%. Is it possible to achieve that with css only? or javascript is inevitable in this case.
<body>
<div class="responsive-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with a lot of content that might exceed 50</li>
<li>Item 4</li>
</div>
</body>
.responsive-list {
list-style-type: none;
min-width: 50%;
width: max-content; /* something like: if max-content > 50% then 100% else 50% */
}
.responsive-list li {
border: 1px solid #ddd;
margin: 5px 0;
}