enable slds-scrollable_x without slds-scrollable-y on Combobox

Question

I am working on a LWC that contain a data table. My data table beiing with a large number of columns, I decided to enable the class slds-scrollable which now contain the table within the div Have a look:

In my component I have an edit mode, that when clicked replace the fields with combobox.

My issue as you can see in the picture is that the combox when click is not really visible. Because the slds-scrollable add a paramerer of overflow Hidden so I cannot see it.

If I change it to overflow Visible then the combobox is visible but on scroll ONLY have a look:

if I delete the slds-scrolable then my table go outside of the div .. but the combobox is behaving alright with overflow visible

Please help me !! How can I have my table scrolable on X within my div and in the same time having my combobox behaving in the right way with overflow visible

Thx you

Answer 1

I had a similar issue regarding having dropdowns being funky with limited space. My work around was to just add blank divs like the one I provided below, that way it had more room to work with. I know your example is just 2 instances on the table but on whatever it is sitting on I recommend adding it to see if it fits what you're looking for. For more room to work with you could add more.

<div class="slds-transition-hide">
      <p>content here</p>
 </div>