flex를 쓰는 자식 요소가 부모 너비를 넘는 이유

https://heewon26.tistory.com/298

해결책

min-width: 0;

default로 min-width:auto;로 되어 있기 때문에 flex-basis:auto가 일어나기 전에 요소가 커지는 만큼 부모가 인식하고 제한하지 못하고 부모를 넘어가버린다.

min-width:0을 주면 flex-basis:auto가 작동해서 부모를 넘지 않는다

flex-basis:auto
"look at my width or height property";

flex-basis에 값을 넣었을 때 다른 item들이 잘리는 이유

flex-basis는 최소 width로 정해지는 것.
flex-basis가 정해진 요소의 width를 빼고 나머지를 비율대로 배분하기 때문에 두 개의 요소에 동등하게 1씩 줬을 때랑 전체에처 flex-basis를 빼고 나머지를 줬을 때의 차이다

flex-basis가 0이면 flex-grow, flex-shrink의 설정 비율대로 아이템 너비를 배분한다
flex-basis를 제외하고 grow의 비율대로 배분하는 건데 flex-basis가 0이니까

default 값

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 0 1 auto