Lighting Datatable position is not relative with modal

Question

The bottom of Lightning datatable overflows beyond the modal if the resolution is increased and causing it to hide. Thus restricting the user to view the records in the last rows.

<template if:true={openmodel}>
        <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">
            <div class="slds-modal__container">
                <header class="slds-modal__header" style="background-color: gainsboro;">
                    <div class="slds-p-around_x-small lgc-bg">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                            <lightning-icon icon-name="doctype:library_folder" size="Large" alternative-text="Library"
                                title="Library">
                            </lightning-icon>
                            &nbsp; Task Library
                        </h2>
                    </div>
                    <div class="slds-p-around_x-small">
                        <h4 id="modal-heading-02" class="slds-text-heading_small slds-hyphenate">
                            <lightning-avatar src="/bad/image/url.jpg" initials="" fallback-icon-name="standard:avatar"
                                alternative-text="Bob Wilson" class="slds-m-right_small"></lightning-avatar>
                            &nbsp;Your Functional Role:&nbsp;{roleName}
                        </h4>
                    </div>
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                        title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close" size="medium">
                        </lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </header>
                <div class="slds-modal__content slds-p-around_medium slds-wrap"
                    style="background-color: lightslategray;" id="modal-content-id-1">
                    <div class="slds-size--1-of-2 slds-p-around--small">
                        <lightning-combobox name="progress" value={value} placeholder="Select Filter" options={options}
                            onchange={handleFilterChange}>
                        </lightning-combobox>
                    </div>
                    <div class="slds-size--1-of-2 slds-p-around--small">
                        <lightning-input variant="label-hidden" label="Search Record" type="search"
                            onchange={handleSearchTask} placeholder="Search for the Task">
                        </lightning-input>
                    </div>
                    <div class="slds-size--1-of-1 slds-p-around--small">
                        <lightning-card title="List of Tasks" icon-name="custom:custom16">
                            <div style="height:20rem;width:35rem;overflow: auto;">
                                <lightning-datatable data-id="lightning-datatable" data={tasksFromLibrary}
                                    columns={columns} key-field="Id" onrowselection={rowSelection1}>
                                </lightning-datatable>
                            </div>
                        </lightning-card>
                    </div>
                </div>
                <footer class="slds-modal__footer" style="background-color: gainsboro;">
                    <lightning-button variant="brand" label="Create Task" title="Create Task" onclick={handleSave}>
                    </lightning-button>
                    <lightning-button label="Close" variant="brand" onclick={saveMethod} class="slds-m-left_x-small">
                    </lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>

How to have the table relative to the modal that works for every resolution.