CSS border-radius로 인해 이 최소 Angular Material Sidenav 구성 요소에서 요소가 사라지는 이유는 무엇입니까? (데모 가능)

Question

Angular Material Sidenav 컴포넌트에 관한 내용입니다. 아래 코드에서 테두리 반경을 늘려서 둘러싸는 요소와 겹치면 요소가 사라집니다.

으아악

(테두리 반경이 없을 때 콘텐츠가 표시됨)

(테두리 반경 추가 후 콘텐츠가 사라짐)

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

요소가 어디로 가는지 볼 수 없고 숨겨진 스타일이 적용되는 것도 볼 수 없으며 DOM에서는 해당 요소가 있다는 것을 볼 수 있지만 표시되지는 않습니다.

Answer 1

border-raduis를 추가하면 예상대로 작동하고 콘텐츠가 표시됩니다.