How to show MegaMenu children while parent has scrollbar?

I use a theme which has a MegaMenu implemented. Everything is fine, but my root categories are more items than the creator of the theme used, so I need to scroll (otherwise the theme will be damaged)

So I added a left scrollbar by adding direction: rtl; and an overflow-y: visible;. But now all child elements are hidden, behind the right vertical border of the dark-grey box.

How can I have the children visible and be still able to scroll?

Is MegaMenu able to do this?

Thank you very much in advance!

Basic HTML structure

<div class="__body">
  <div class="__links-wrapper" style="height: 410.017px;">
    <ul class="__links">
      <li class="__item ">
       <a href="">Baby &amp; Kleinkind</a>
       <!--  CHILDREN START HERE --->
       <div class="__megamenu __megamenu--xl"> 
         <div class="megamenu megamenu--department"> 
           <div class="row">
             <div class="col-4">
               <ul class="megamenu__links megamenu__links--level--0">
                 <li class="megamenu__item megamenu__item--with-submenu">
                   <a href="">Baby Badebedarf</a>
                   <ul class="megamenu__links megamenu__links--level--1">
                     <li class="megamenu__item"><a href="">Babybadewannen</a></li>
                     <li class="megamenu__item"><a href="">Shampoo-Schutzschilder</a></li>

Solution

I got it working by adding this CSS:

The order is from outside to inside:

    .departments {
        position: relative;
     }   
    .departments__body {
        top: 0;
        position: absolute;
     }   
    
    .departments--opened .departments__links-wrapper {
        overflow-y: scroll;
        direction: rtl;
    }
    
    .departments__links {
        position: static;
    }
    .departments__megamenu { 
        position: absolute;
        top: 0;
        height: 100%;
        visibility: hidden;
        direction: ltr;
    }
    .megamenu .megamenu megamenu--department {
        direction: ltr;  
    }