Pop-out menu pin to top or bottom if overflow - css

Question

I've seen this done before but haven't found the right key words to find a solution. I'm creating a vertical list of items that will each have a horizontal pop-out menu. I'm trying to position each menu centered with the lsit item by default, but not extend past the top or bottom of the list boundary if they are too large. I'm aware that I can write different CSS for each menu (e.g. set "bottom:0px" to pin to bottom), but I won't know the contents of each menu and the list may shrink or expand so I need a solution that can scale to different quantities/heights/etc.
Default behavior: Each pop-out menu (the boxes with arrows) is centered with its corresponding element
What I don't want: On smaller screen sizes, or if the menu is large enough, the menu will extend beyond the boundary of the list (the red border):
What I want: I would like the menus to pin to the top or bottom before they extend beyond the red boundary. I can achieve this by setting the position of each menu individually, but I'm looking for something more scaleable.
Does anyone know what this behavior is called or know of a solution? Here is a code pen example: https://codepen.io/dylanrose/pen/ZERQWmM
HTML:
<div class="list">
<div class="item">
<div class="itemMenu"></div>
</div>
<div class="item">
<div class="itemMenu"></div>
</div>
<div class="item">
<div class="itemMenu"></div>
</div>
<div class="boundary"></div>
</div>
CSS
* {
margin:0;
box-sizing:border-box;
}
.boundary {
position:absolute;
height:calc(100% - 80px);
width:calc(100% - 80px);
border:1px dashed red;
}
.list {
height:100vh;
padding:40px;
box-sizing:border-box;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
}
.item {
flex:1;
border:2px solid;
width:80px;
position:relative;
display:flex;
align-items:center;
}
.itemMenu {
position:absolute;
height:200px;
width:300px;
border:2px solid;
border-color:inherit;
background-color:white;
right:120%;
border-radius:10px;
display:flex;
align-items:center;
}
.item::after {
content:"";
height:10px;
width:10px;
border-top:2px solid;
border-right:2px solid;
border-color:inherit;
background-color:white;
transform:rotate(45deg);
position:absolute;
right:113%;
}
.item:nth-child(1) {
border-color:green;
}
.item:nth-child(2) {
border-color:blue;
}
.item:nth-child(3) {
border-color:purple;
}