How to make element's vertical overflow visible outside of its parent container

Question

I am building a timeline component. This timeline component contains certain date ranges. On each date range I have a hover event that when triggered displays more details about that date range. This works fine except when I am hovering over a date range in the last row - then I get vertical scroll because the details expand downwards.

My first solution is to make the details on the last 2 rows expand upwards, but I still got vertical scroll when there were only 1 or 2 rows and the details went out of range upwards (it just changed the direction of where the user would have to scroll).

Here is how it looks now: Notice that the details span has appeared but it is scrolled out of view. It should actually extend outside of the entire container if it is in the last row.

For reference, this is how it looks when the overflow issue is not happening (rather when I am not hovering over a date range in the last row:

Here is the CSS for the date range and the details.

.timeline-container > .overflowing-wrapper > .body > .timeline-row .ranges-container > .date-range { 
    border-radius: 12px;
    margin-top: 3px;
    margin-bottom: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.timeline-container > .overflowing-wrapper > .body > .timeline-row .ranges-container > .date-range > .details {
    position: absolute;
    top: 30px;
    width: 250px;
    background: #FFF;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.15);
    padding: 5px;
    min-height: 25px;
    line-height: 25px;
    text-align: center;
    display: none; /* changes to block when I hover. */
    padding: 15px;
    border-radius: 5px;
}

And here is the HTML (or rather the JSX):

<div className="date-range">
    <span className="details">
        {"From " + formatDateStringApple(range.from.toLocaleString()).substring(0, 6) + " to " + formatDateStringApple(range.to.toLocaleString()).substring(0, 6)}
        <br />
        {range.description === undefined ? "There is no data to show." : range.description }
    </span>
</div>

Edit: One thing that I have just noticed is that when I remove the overflow-x: scroll property and I set the overflow-y: visible property, it works as intended, but I need to show vertical scroll and hide horizontal scroll.