CSS
-
부모의 width를 넘어가버리는 Child FlexStudy/개발 2022. 9. 18. 19:28
출처: 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가 선택된다. 이로인해 엘리먼트가 위 사진처럼 튀어나가게된다...