I am dealing with a situation where I have a list that has a fixed width in pixels. Within this list, there are two items: one with content that fits within the width of the list, and another item whose content is longer than the width of the list itself.
My goal is to dynamically adjust the width of each list item so that it accommodates the larger size between the list width and the content width (ensuring that the second item can fully display its content).
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
width: 400px;
overflow-x: scroll;
outline: 1px dashed red;
}
li {
max-width: none;
min-width: 100%;
padding: 0.5rem 1rem;
white-space: nowrap;
background-color: skyblue;
outline: 1px dashed blue;
}<ul>
<li>test</li>
<li>test test test test test test test test test test test test test test test test test test test test test</li>
</ul>