html - Material sidenav导致翻译和flex CSS属性出现问题

Question

因此，目前正在使用具有sidenav结构的 Electron 应用程序，如下所示:

<!-- main container -->
<mat-drawer-container>
  <mat-drawer>parent sidenav</mat-drawer>

  <mat-drawer-content>
    parent content
    <mat-drawer-container>
      inside child container
      <mat-drawer>inside child sidenav</mat-drawer>
      <mat-drawer-content>
        inside child content
        <app-route>current problem occurs here</app-route>
      </mat-drawer-content>
    </mat-drawer-container>
  </mat-drawer-content>

</mat-drawer-container>

因此，假设在第一条路线上我有这样的HTML:

<div class="box-empty-container">
  <div class="box-empty-msg">
    <div class="box-empty-logo"><span class="material-icons">info</span></div>
    <div class="box-empty-title">Nothing to show you here as your specified folders for checking music files are currently empty</div>
    <div class="box-empty-subtitle">Add new music search directories</div>
  </div>
</div>

还scss:

@mixin widthheight100{
   width: 100%;
   height: 100%
}

.box-empty-container{
      position: relative;
      @include widthheight100() ;
      
      .box-empty-msg{
         position: absolute ;
         left: 50% ;
         top: 45% ;
         transform: translate(-50%, -50%);
         text-align: center;
       .box-empty-logo{
            span.material-icons{
               font-size: 2.5rem;
            }
       }
         
       .box-empty-title{
            font-family: 'jost-bold';
            font-size: 12pt;
       }
         
       .box-empty-subtitle{
            font-family: 'jost-regular';
            font-size: 10pt;
       }
}

我试图在scss中使用flex和translate方法来集中 div.box-empty-msg，但它们仍然不是中心。当页面加载时，该div位于中心，但是当我打开和关闭sidenav时，它的位置从中心移开。我怎么解决这个问题 ？
编辑:当前将scss样式更改为 postion: absolute策略。 Link here for similar code in stackblitz。这似乎在stackblitz中工作正常，但是在我的实际元素中，当屏幕大小较大或中等时， div.box-empty-msg实际上偏离了中心一定距离。另外，我认为在我的元素中，sidenav会将div标签推离中心。

Answer 1

@ReneVanDerLende在由于将mat-drawer-content的css属性设置为{ width: 100% ; height: 100% }而彻底检查了我的元素后，它干扰了box-empty-container的样式，因此将其向右稍微移开了。