Mengapakah jejari sempadan css menyebabkan elemen hilang dalam komponen Sidenav Bahan Sudut minimum ini? (demo tersedia)

Question

Ini mengenai komponen Angular Material Sidenav. Dalam kod di bawah, apabila saya meningkatkan jejari sempadan supaya ia bertindih dengan elemen yang disertakan, elemen itu hilang.

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>
    Drawer content <br />
  </mat-drawer>
  <mat-drawer-content
    style="
      border-radius: 0px; // <-- try to increase this value to see effect
      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>

(kandungan kelihatan apabila tiada jejari sempadan)

(Kandungan hilang selepas menambah jejari sempadan)

Stackblitz: https://stackblitz.com/edit/7swnhp?file=src%2Fexample%2Fsidenav-drawer-overview-example.html

Saya tidak dapat melihat ke mana elemen itu pergi, saya tidak dapat melihat sebarang gaya tersembunyi digunakan, dalam DOM saya dapat melihatnya di sana tetapi ia tidak kelihatan.

Answer 1

Apabila saya menambah border-raduis ia berfungsi seperti yang diharapkan dan kandungannya kelihatan.