How do I position an element next to overflow:scroll - css

Question

I need help with position.
This is setup code
<div style="background-color: gray; width: 100%; height: 100vh; display: flex; justify-content: center; ">
<div style="display: flex; flex-direction: column; background-color: rgb(248, 83, 83); width: 300px; position: sticky; bottom:0; ">
<div style="width: 100%; border: 1px solid black; ">Something</div>
And this is code where is problem
<ul >
<div *ngFor="let x of elementList" >
<li style="border: 1px solid black; position: relative; height: 500px; overflow-y: scroll;"> <span>{{x.Title}}</span>
<ul>
<div style="background: pink; position: absolute; right: -50px; top: 0;">
<li >{{x.Subtitle}}</li>
<li >{{x.Subtitle}}</li>
<li >{{x.Subtitle}}</li>
<li >{{x.Subtitle}}</li>
</div>
</ul>
</li>
</div>
</ul>
</div>
<div style="border: 1px solid black; width: 100%; display: flex; gap: 10px; padding: 5px;">
<span class="material-icons-outlined">
arrow_back
</span> <span>Hide navigation</span>
</div>
</div>
<div style="background-color: rgb(152, 247, 152); width: 100%; height: 100%;"></div>
</div>
I working on this for past 5h so can you help me?
This is full code
enter image description here
What I want is set list outside of contaner next to scroll

Answer 1

HTML;
<div id="container">
<div id="middle">
<div id="inner">Something</div>
</div>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
</div>
</div>
To force a container to have a scrollbar, the inner content needs to have a width greater than it's container. Therefore I set the inner div's width to 120% and then put overflow: scroll on the middle div.
Styling;
body {
margin: 0;
}
#container {
background-color: gray;
width: 100%;
height: 100vh;
display: flex;
}
#middle {
display: flex;
flex-direction: column;
background-color: rgb(248, 83, 83);
width: 300px;
position: sticky;
bottom:0;
overflow: scroll;
}
#inner {
width: 120%;
border: 1px solid black;
}
Demo