Горизонтальная полоса прокрутки внутри angular-material (mat-tab) с использованием FlexBox Grid

Я пытаюсь реализовать горизонтальную полосу прокрутки для отображения изображений, но ширина контейнера-оболочки (scroll-container) переполняется. Мне также нужно использовать сетку FlexBox, чтобы она реагировала на разные размеры экрана.

Структура HTML и SCSS приведена ниже. Контейнер должен находиться внутри группы mat-tab-group (Angular Material). div 'item' будет содержать несколько элементов.

Я запускаю его в хроме и проверил инспектора, по-видимому, свойство mat-tab-body-wrapper display: flex вызывает эту проблему. Есть ли обходной путь для этой проблемы?

HTML

  <mat-tab-group>
      <mat-tab label="First"> 
     <div class='row scroll-container'>
           <div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
             <div class='horizontal-slider'>
               <div class='slider-container'>
                 <div class='item'>
                   <img src='' alt=''>
                 </div>
               </div>
             </div>
           </div>
         </div>
      </mat-tab>
      </mat-tab-group>

СКСС

 .scroll-container {
            margin: 8px 0 0 0;
           
    .horizontal-slider {
       display: flex;
       overflow-y: hidden;
       max-width: inherit;
       overflow-x: scroll;
       box-sizing: border-box;

    .slider-container {
      
             .item {
               display: flex;
               margin-right: 8px;
        
               img {
                 width: 124px;
                 height: 124px;
               }
             }
        
           }
         }


}