LWC Custom lookup in custom datatable doesn't extend out of table boundary

Question

I have a custom datatable which contains a custom lookup component.

(Custom lookup component is from: https://lwcfactory.com/custom-lookup-salesforce-lwc/)

I put it inside of my custom datatable, and it works perfectly fine but the search dropdownlist doesn't extend out of datatable boundary.

I inserted a few blank labels to extend the row height forcefully so that it can show all of its search results.

Otherwise it goes like this:

How do I fix it?

I tried to add 'overflow:visible' to all over the related places but it turned out to be not working.

=== CODE OF MY CUSTOM DATATABLE ===

// cdlookupComp.html
<template>
    <c-cdlookup-comp record-id={value}>
    </c-cdlookup-comp>
</template>

// cdcustomDatatable.js
import LightningDatatable from 'lightning/datatable';
import cdlookupComp from './cdlookupComp.html';

export default class CdcustomDatatable extends LightningDatatable {
    static customTypes = {
        customLookup: {
            template: cdlookupComp
        }
    };
}

// cdlookupComp.html
<template>
    <c-custom-lookup-lwc label={label}
                         icon-name={iconName}
                         s-object-api-name={sObjectApiName}
                         default-record-id={defaultRecordId}>
    </c-custom-lookup-lwc>
</template>

Answer 1

I solved it by using loadStyle and CSS (static resource). See https://getoncrm.com/how-to-override-css-of-inner-elements-of-lightning-web-component/