为何CSS border-radius会导致Angular Material Sidenav组件元素消失？附演示

问题描述 #

使用Angular Material的Sidenav组件时，给<mat-drawer-content>设置较大的border-radius值，当圆角区域与外层<mat-drawer-container>重叠时，主内容会消失。DOM中能看到该元素存在，但无法显示。

代码复现 #

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>
    Drawer content <br />
  </mat-drawer>
  <mat-drawer-content
    style="
      border-radius: 0px; <!-- 增大该值即可触发问题 -->
      display: flex;
      flex-direction: column;
      justify-content: stretch;
      align-items: stretch;
      background-color: rgb(255, 200, 200);
    "
    >Main content</mat-drawer-content>
</mat-drawer-container>

现象对比 #

• 无圆角时内容可见
  

• 添加圆角后内容消失
  

原因分析 #

<mat-drawer-container>默认设置了overflow: hidden样式，当<mat-drawer-content>的圆角过大，导致内容区域的主体部分被容器的裁剪范围覆盖时，超出部分会被隐藏，最终呈现出内容消失的效果。

解决方案 #

方案1：取消容器的裁剪限制 #

给<mat-drawer-container>添加overflow: visible，让超出容器的内容可以正常显示：

<mat-drawer-container class="example-container" style="overflow: visible;">
  <mat-drawer mode="side" opened>
    Drawer content <br />
  </mat-drawer>
  <mat-drawer-content
    style="
      border-radius: 50px;
      display: flex;
      flex-direction: column;
      justify-content: stretch;
      align-items: stretch;
      background-color: rgb(255, 200, 200);
    "
    >Main content</mat-drawer-content>
</mat-drawer-container>

方案2：调整圆角或添加内边距 #

减小border-radius值避免过度重叠，或者给<mat-drawer-content>添加内边距，确保内容主体不会被圆角裁剪：

<mat-drawer-content
  style="
    border-radius: 20px;
    padding: 10px; <!-- 添加内边距保护内容区域 -->
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    background-color: rgb(255, 200, 200);
  "
  >Main content</mat-drawer-content>

方案3：提升内容层级 #

给<mat-drawer-content>设置相对定位并提高z-index，使其在容器裁剪层之上显示：

<mat-drawer-content
  style="
    border-radius: 50px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    background-color: rgb(255, 200, 200);
  "
  >Main content</mat-drawer-content>

内容的提问来源于stack exchange，提问作者Wajahath