Material sidenav 导致翻译和 flex css 属性出现问题

Question

所以，目前我的电子应用程序具有这样的 sidenav 结构：

<!-- 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 的样式，因此将其稍微转向对。

Material sidenav 导致翻译和 flex css 属性出现问题

Material sidenav causing problem with translate and flex css properties

html

css

electron

scss-mixins

angular9