使用 FlexBox Grid 的角度材料（mat-tab）内的水平滚动条答案

【问题标题】：Horizontal scrollbar inside angular-material (mat-tab) using FlexBox Grid使用 FlexBox Grid 的角度材料（mat-tab）内的水平滚动条
【发布时间】：2021-09-10 15:26:24
【问题描述】：

我正在尝试实现一个水平滚动条来显示图像，但是包装器（滚动容器）容器的宽度溢出了。我还需要使用 FlexBox 网格来使其响应不同的屏幕尺寸。

HTML 和 SCSS 的结构如下所示。容器必须在 mat-tab-group（Angular 材质）内。 div 'item' 将包含多个项目。

我在 chrome 上运行它并检查了检查器，显然 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>

SCSS

 .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;
               }
             }
        
           }
         }


}

【问题讨论】：

标签： sass responsive-design angular-material horizontal-scrolling mat-tab

【解决方案1】：

最有效的解决方案如下所示。除了 flex-nowrap 之外，您还需要设置溢出属性以防止整个页面扩展。

具有溢出属性：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

 <h6>Bootstrap 4 horizontally scrollable card groups</h6>
 <div class="d-flex flex-row flex-nowrap overflow-auto">
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>            
</div>

【讨论】：

我需要使用 flexbox 网格而不是 Bootstrap。
@NikhilMore I need to do it using flexbox grid and not Bootstrap 将此类添加到问题正文中。
设置 .horizontal-slider{display:flex;width:100%;max-width:100%;height:auto;overflow-x:scroll;overflow-y:scroll}