Sizing a positioned element based on one child only - html

Question

I have an absolutely-positioned container with two children. I would like the width of the container to be based on the width of the first child, while the second child dynamically adapts to the width of its parent.
const passenger = document.getElementById("passenger");
function toggle(){
passenger.classList.toggle("squashed");
}
#top {
padding: 4px;
border: thin solid red;
position: absolute;
}
ul {
padding: 4px;
border: thin solid green;
}
li {
padding: 4px;
border: thin solid purple;
}
ul#passenger li {
width: auto; /* ??? No good -- what goes here ??? */
}
.squashed {
max-width: 10em;
}
<button onclick="toggle()">Toggle</button>
<hr/>
<div id="top">
<ul id="driver">
<li>This is the desired width</li>
</ul>
<ul id="passenger">
<li>This should be forced to wrap because its width doesn't contribute to the container width calculation.</li>
</ul>
</div>
Click the "Toggle" button in the example to see an approximation of the effect I'm going for. When I don't artificially constrain the width of passenger, it grows horizontally to fill the page, which pushes the width of top to match it.
I have tried setting #passenger li {width:auto;} as well as width:100%;, and also various combinations of word-wrap, etc, but I can't figure out how to force the li to take on the width of its parent. It seems that #passenger li {width:100%;} only works when the width of top is explicitly set, rather than based on the width of driver. It also "works" the way I want if I take passenger completely out of the flow by making it position: absolute but I want top to completely contain both elements, so this is not an option.
Is the desired effect possible using CSS only (no JS)?

Answer 1

You could do this with display: table on parent element and some small width, for example 1%, and then you also set white-space: nowrap on first ul element.
In this case all of the other child elements will adjust its width to the largest one.
#top {
padding: 4px;
border: thin solid red;
position: absolute;
display: table;
width: 1%;
}
#driver {
white-space: nowrap;
}
ul {
padding: 4px;
border: thin solid green;
}
li {
padding: 4px;
border: thin solid purple;
}
<div id="top">
<ul id="driver">
<li>This is the desired width</li>
</ul>
<ul id="passenger">
<li>This should be forced to wrap because its width doesn't contribute to the container width calculation.</li>
</ul>
</div>