부모의 width를 넘어가버리는 Child Flex

출처: https://makandracards.com/makandra/66994-css-flex-and-min-width

튀어나온 자식 엘리먼트

Flex를 사용하다보면 child가 부모 밖으로 넘쳐 튀어나오는 경우가 있다.
이는 min-width: 0 를 통해 해결할 수 있다.

이런 현상이 생기는 이유
보통은 min-width의 기본값은 0으로 설정되어있다.
하지만 flex의 경우, auto 로 설정되어있다.

min-width는 width값과 경쟁 시 이기도록 설계되어 있다.
즉, width가 min-width보다 작아지는 경우 min-width값이 선택된다.
그런 이유로 여기서 엘리먼트가 암묵적 auto width 이하로 줄어드는 경우, min-width: auto가 선택된다.
이로인해 엘리먼트가 위 사진처럼 튀어나가게된다.

해결법은 앞서 제시했듯이 min-width:0을 설정해주는 것이다.
auto였던 기본값 대신 0이 들어가면서 가능한 width만을 차지하게 된다.

min-width:0이 적용됨