Combobox hiding behind footer - modal content not able scroll when overflow =initial/visible

I have a modal with a fixed height, so if the number of fields increase in the modal, scrollbar appears as expected.

However I have a Combobox at the end of the form which I am not able to view the values, even when I try to click the scrollbar it loses focus.

Solution tried :-
I tried overriding with this css

.THIS .slds-modal__content{
overflow: visible;
}

(Also tried overflow: initial)

Now the problem gets solved, but it introduces a new problem, that is when an error message comes the modal goes out of the browser window size (Same thing happens when I try to add more fields to the modal) and gets hidden behind the address bar, only visible when we zoom out, the end user may not know this trick though.

Here is some code —

     <div style="height:480px">
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_small">
        <div class="slds-modal__container">
            <header class="slds-modal__header">  
                <button class="slds-button slds-button_icon slds-modal__close" title="Close" onclick="{!c.closeMainModal}">
                    <lightning:icon iconName="utility:close" alternativeText="Close" size="small" />  
                    <span class="slds-assistive-text">{!$Label.c.Select_Plan_Main_Close_Alt_Text}</span>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Add Dependent</h2>
                <p class="slds-m-top_x-small">Provide key information about the dependent.</p>
            </header>
            <div class="slds-modal__content slds-theme_default" id="modal-content-id-1">  
                <lightning:layout class="slds-p-around_medium slds-p-bottom_x-large slds-theme_inverse" multipleRows="true"> 
                    <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="3" largeDeviceSize="6" padding="around-small"> 
                        Dependent For : {!v.employee.Name}
                    </lightning:layoutItem>
                </lightning:layout>


                <lightning:layout class="slds-p-around_x-small" multipleRows="true">
                    <!-- Form Start --> 
                    <lightning:layoutItem size="12" smalldevicesize="6" mediumdevicesize="6" largedevicesize="6" class="slds-p-around_x-small">
                        <lightning:input label="First Name" value="{!v.depRecord.FirstName}" required="true" type="text" variant="standard"></lightning:input>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="12" smalldevicesize="6" mediumdevicesize="6" largedevicesize="6" class="slds-p-around_x-small">
                        <lightning:input label="Last Name" value="{!v.depRecord.LastName}" required="true" type="text" variant="standard"></lightning:input>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="12" smalldevicesize="6" mediumdevicesize="6" largedevicesize="6" class="slds-p-around_x-small">
                        <lightning:combobox label="Relationship" value="{!v.depRecord.Relationship__c}" options="{!v.relationOptions}" placeholder="Select an option" dropdownAlignment="left" required="true" variant="standard"></lightning:combobox>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6" smalldevicesize="3" mediumdevicesize="3" largedevicesize="3" class="slds-p-around_x-small">
                        <lightning:combobox label="Birth Gender" value="{!v.depRecord.Gender__c}" options="{!v.genderOptions}" placeholder="Select an option" dropdownAlignment="left" required="true" variant="standard"></lightning:combobox>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6" smalldevicesize="3" mediumdevicesize="3" largedevicesize="3" class="slds-p-around_x-small">
                        <lightning:input label="Age" value="{!v.depRecord.Age__c}" required="true" type="number" variant="standard"></lightning:input>
                    </lightning:layoutItem>

                    <!-- Form End -->

                </lightning:layout>

            </div>

            <footer class="slds-modal__footer slds-theme_shade"> 
                <lightning:button variant="neutral" label="{!$Label.c.Select_Plan_Cancel}" title="Cancel" onclick="{!c.closeMainModal}"/>
                <lightning:button variant="brand" label="Add" title="Add" onclick="{!c.createNewDependent}" type="Submit" />
            </footer>
        </div>
    </section>

    <div class="slds-backdrop slds-backdrop_open"></div>

</div>

Can anyone please help me out of this?

<div style="overflow: visible">
    <lightning-combobox
      options={typeOptions}
      onchange={handleChange}
      required>
    </lightning-combobox>
</div>

.slds-modal__content{
    overflow: initial;
}

dropdownAlignment="bottom-left"