combo box inside slds-scrollable doesn't render as expected in LWC

Question

I have LWC where if I click on combobox then expected outcome is it should show options at the top but instead it adds a scroll bar to show option.

HTML:

<template>
    <lightning-card>
        <div class=" slds-scrollable" style="height:150px">
            <table class="slds-table slds-table_bordered slds-table_header-fixed slds-table_resizable-cols slds-table_fixed-layout">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th>col 1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <lightning-combobox style="position:absolute" name="progress" label="Status" value={value} placeholder="Select Progress"
                             options={options} onchange={handleChange}></lightning-combobox>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </lightning-card>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    value = 'inProgress';

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    handleChange(event) {
        this.value = event.detail.value;
    }

}

it should show 3rd option at the top but instead it adds a scrollbar as shown in the below image

if I remove slds-scrollable then combobox behaves as expected but scrollable is required, please confirm if can solve this issue.

Answer 1

I have solved this issue by changing

<div class=" slds-scrollable" style="height:150px">

to

<div class=" slds-scrollable" style="height:30rem">

and setting dropdown-alignment="auto" on combo box,

This worked but if anyone have any better solution, please do post here.

Answer 2

Try setting the dropdown-alignment="auto" inside combobox.

Here is example:

<lightning-combobox 
   dropdown-alignment="auto"
   label="Transfer to" 
   options={tmpOptions} 
   onchange={handleChange}
   required>
</lightning-combobox>

Answer 3

Add a CSS file to your LWC containing:

.slds-modal__content{
    overflow: initial;
}