Видимость полосы прокрутки mat-sidenav во время анимации

Question

Я работаю с mat-sidenav, и мне удалось настроить очень простой, который будет сидеть с левой стороны, открываться и закрываться ровно настолько, чтобы показывать иконки матов.Эта часть в порядке и работает, как ожидалось.Я включил слайд анимации через CSS для открытия и закрытия.Теперь проблема заключается в видимости полосы прокрутки во время анимации.Я понимаю, почему этот свиток существует, потому что я использую ngif, чтобы скрыть содержимое после значка mat, чтобы, когда он был в частично закрытом состоянии, буквы / описание значка не выглядели в конце ...вставлен, поскольку анимация происходит с помощью функции переключения - у меня все в порядке с полосой прокрутки, существующей здесь.Моя проблема в том, чтобы сделать полосу прокрутки невидимой, но все еще там;причина в том, что меню также может увеличиваться по вертикали в зависимости от разрешений, и я хотел бы, чтобы пользователь мог прокручивать его, даже если он не видит полосу прокрутки.Теперь это не новая проблема, которую я увидел после исследования, однако я не понимаю, как применить то, что я прочитал в приведенной ниже ссылке, к моей проблеме.Это наряду с тем, что я наблюдал при переопределении атрибута css, которое, как я полагаю, связано с тем, что я не использую css scoping должным образом;составляет мою проблему.

Вот ссылка на популярное решение: Скрыть полосу прокрутки, но при этом все еще можно прокручивать

Осматривая элемент, я нахожу мат-ящик-внутренний-В контейнере есть свойство overflow, и я обнаружил, что ни одно из свойств, которые я установил через css, не принимает.Ниже приведена очень упрощенная версия html для отладки, с которой я работаю, чтобы попытаться заставить ее работать:

<mat-sidenav-container fullscreen>
   <mat-sidenav #sidenav mode="side" class="navbarComponent" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true">

   <mat-nav-list>

      <div id="menu" class="custom-selector">
        <mat-list-item (click)="toggle()">
         <mat-icon mat-list-icon class="noselect">menu</mat-icon>
         </mat-list-item>

         <div *ngIf="sidenavWidth > 6" class="sidenav-item noselect" style="background-color:#d56a00; padding:20px 30px 20px 10px; line-height:0px; text-align:left;">
          <table width="100%">
            <tr>
              <td><img src="assets/images/avatar.png" width="100" height="100"></td>
              <td id="avatar-table" style="color:#fff; vertical-align:top; padding:10px; line-height:15px;" class="col text-truncate"><p><b>Some name</b><br/>
                   Some other text</p>
            </tr>
          </table>
        </div>

         Will use ngfor to generate all the menus. This one is just one and the Html is just a menu with hardcoded values
        <app-menu-list-item [sidenavWidth]="sidenavWidth" [subMenuEnabled]="subMenuEnabled"></app-menu-list-item>

      </div>




     </mat-nav-list>

   </mat-sidenav>


</mat-sidenav-container>

А вот и я попробовал css.Использовали в основном именно то, что было в ссылке для решения, но, насколько я понимаю, вам нужно обернуть элемент, отвечающий за прокрутку, в другой элемент и сделать его со скрытым переполнением и относительным положением.Я попытался сделать это, используя mat-sidenav в качестве parent / wrapper и .mat-box-inner-container в качестве дочернего / внутреннего элемента:

html, body {
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

mat-sidenav {
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}

.mat-drawer-inner-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: -15px;
    border: 1px solid blue;
    overflow: auto;
}

Теперь для последней части ... давайте предположим, что яполучил вышеупомянутое правильно.CSS не берет.Это из-за прицела css?.Mat-box-inner-container остается прежним - это то, что я вижу после проверки элемента:

.mat-drawer-inner-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Если я изменю элемент переполнения в браузере, скажем, скрытый, просто чтобы посмотреть, если онберет - она ​​удаляет полосу прокрутки (не то, что я хочу, а хороший способ проверить) ... что должно означать, что способ применения моих атрибутов CSS неверен.

Да, я новичок в веб-интерфейсе.Желая учиться, хотя это должно быть так, как я работаю над проектом.

Любой совет?

РЕДАКТИРОВАТЬ: Запрошенный скриншот. проверяемый элемент

css:

.mat-drawer-inner-container {
    overflow-x: hidden !important;
}