[CSS] flex 부모 밑의 가변 크기 자식의 크기가 고정되지 않는 문제

왼쪽의 패널의 크기를 동일하게 맞추어 놓았는데 canvas를 렌더시키면 자꾸만 오른쪽 패널의 자리를 침범하는 문제가 생겼다

 

부모 클래스에 display: flex가 들어가 있었고, 자식 클래스에 canvas가 들어가 있었는데 canvas는 가변 요소라 부모 클래스에서 지정한 값을 넘어서 자꾸 확장되는 문제가 발생했다

 

기본적으로 flex에서는 min-width가 auto이기 때문에 자식 콘텐츠의 크기를 제한하지 않고 있어서, 부모에서 지정한 크기보다 자식 콘텐츠 크기가 커지만 그만큼 늘어나서 표시된다

 

canvas뿐만 아니라 text 등 가변적으로 크기가 변하는 콘텐츠 전체에 해당된다

 

해결방법

minWidth: 0

자식 클래스의 스타일에 min width: 0으로 설정해 주면, 자식 콘텐츠의 크기가 0보다 작아질 수 없다고 선언한 것이기에 부모 클래스 크기만큼 작아질 수 있게 된다