CSS - 자식요소가 부모요소를 덮어쓸때 숨기는 방법

<>
  <Header/>
  <Main />
</>

루트요소 바로 밑으로 이와같은 코드가 있다고 치자.

현재 index.js 파일에

#root {
  width: 100%;
  height: 60%;
  max-width: 500px;
  background-color: var(--color-bg-dark);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}

이와같이 스타일링이 되어있다. 따라서 border-radius: 1rem이 적용되어 있는데 자식요소인 Header 컴포넌트에서 display: flex 요소를 주면 헤더부분의 border가 다시 직각으로 덮어씌어 진다.

이와 같이 자식 요소가 부모 요소를 덮어쓸 때 숨기는 방법은 부모요소에 overflow: hidden을 적용해주면 된다.

위 코드에서는 #root에 overflow: hidden; 을 추가해주면 다시 border-radius: 1rem이 적용되는것을 볼 수 있다.