Make li element width the max of siblings, itself, and parent li - css

Question

I've looked at several related posts here and none seem to cut to the core of my challenge.
The scenario is that I have an li element that contains a ul element. I want the widths of the li elements inside the contained ul to be at least as wide as the parent li.
Below are two examples. The first example displays the way I want it to. The second illustrates the issue. I want the items that start "Sub-Item 1" and "Sub-Item 2" to take on the width of the item that starts "Long Item". If you run the code snippet it should be pretty clear what I am after.
I am looking for a 100% CSS solution.
Any assistance would be appreciated.
<style>
ul {
padding:0;
}
ul li {
position: relative;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: left;
background-color: red;
white-space:nowrap;
}
ul li ul {
position: absolute;
display: flex;
flex-direction: column;
text-align: left;
background-color: lightgoldenrodyellow;
padding:0;
}
ul li ul li {
text-align: left;
width: 100%;
margin-left: 0;
border-style: none;
background-color: lightgoldenrodyellow;
padding:0;
}
</style>
<div style="position:absolute;top:0;">Example 1
<ul>
<li>
Short Item
<ul>
<li>This is longer than First Item and displays as desired.</li>
<li>Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>
<div style="position:absolute; top:200px;">Example 2
<ul>
<li>
Long Item - This is deliberately longer. I want the width of li below to display as wide but it doesn't
<ul>
<li>Sub-Item 1: Shorter than Long Item and does NOT display as desired</li>
<li>Sub Item 2: Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>

Answer 1

This can be accomplished by using flex and wrapping the "Short Item" text in a span tag.
ul {
display: flex;
padding:0;
}
ul li {
position: relative;
display: flex;
flex-basis: auto;
flex-direction: column;
list-style: none;
text-decoration: none;
background-color: red;
white-space:nowrap;
}
span{
flex-basis: auto;
flex-grow: 1;
}
ul li ul {
display: flex;
flex-direction: column;
text-align: left;
background-color: lightgoldenrodyellow;
padding:0;
}
ul li ul li {
text-align: left;
width: 100%;
margin-left: 0;
border-style: none;
background-color: lightgoldenrodyellow;
padding:0;
}
<div>Example 1
<ul>
<li>
<span>Short Item</span>
<ul>
<li>This is longer than First Item and displays as desired.</li>
<li>Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>