The actions menu that is supposed to show when you click on the downward arrow on the right-end of a row is not showing.

My component is dead simple: there is a lightning:datatable inside it containing a single row of data. The component is plugged into a Lightning Record Page, inside a tab. Everything renders fine however the actions menu is visually hidden.

Upon a quick inspection of the page my attention was drawn to the following inner-div:

<lightning-datatable>
    <div>
        <div tabindex="-1" class="slds-scrollable_y" style="width: 886px;">
            <table>...</table>
        </div>
    </div>

The slds-scrollable_y class has the following 2 properties that are hiding the dropdown list:

overflow: hidden;
overflow-y: auto;

I can overwrite the styling using CSS, however as Alexander Graham Bell must've once said, when one door opens another closes: the datatable is now cut off at the bottom and the action menu still doesn't show.

I can wrap the datatable within a div and make it tall, but needless to say that's just far from a good solution. I tried experimenting with the z-index but no luck either.

Related question (bot doesn't solve my problem): lightning:buttonMenu dropdown alignment