list with right positioned flyout does not stay within container

[LaptopTa]

I have a series of post titles that visually form a list. Upon hovering over a row in the list, a \[code\]<div>\[/code\] containing the post content becomes visible at the right edge of the row, behaving like a flyout menu. This flyout \[code\]<div>\[/code\] has a greater height than the row (in most cases). Its height is also variable, so it is not predictable.See here. Scroll to the bottom.Because this flyout \[code\]<div>\[/code\] is absolutely positioned to the right of its parent, it achieves the desired flyout effect.But if you scroll to the bottom of the list, you can see that the last item extends below the bottom edge of \[code\]#schedule-section-container\[/code\]'s border. I would like to correct this in the cleanest way possible.I know this is because of the positioning. But is there a way that the same flyout effect could be achieved without guesstimating a \[code\]margin-bottom\[/code\]? I would like to use floats, but I don't know how to get the list to keep its short height while having a flyout.