CSS flex 자식이 부모를 뚫고 넘칠 때 — min-width: 0 | 기술노트

Q: Grid에서도 같은 문제가 있나요?

네. grid-template-columns: 1fr 대신 minmax(0, 1fr) 로 바꾸면 같은 원리로 해결됩니다.

핵심 요약

flex 컨테이너 안의 자식이 긴 텍스트·코드블록·중첩 그리드 때문에 부모 폭을 뚫고 넘치는 건, flex item의 min-width 기본값이 auto(= 콘텐츠 최소 크기)이기 때문이다. 넘치는 자식에 min-width: 0(또는 overflow: hidden)을 주면 정상적으로 줄어든다.

1. 왜 생기나

flex item은 기본적으로 "내용물보다 작아지지 않으려" 한다. 그래서 white-space: nowrap인 긴 텍스트나 min-content가 큰 자식이 있으면 flex-shrink가 무시되고 넘친다.

2. 해결

.parent { display: flex; }
.child {
  min-width: 0;            /* 핵심: auto → 0 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

그리드 자식이라면 min-width: 0과 함께 min-height: 0도 필요할 수 있다.

3. 함정

똑같은 문제가 CSS Grid에서도 발생한다 — 그땐 minmax(0, 1fr)을 쓴다
overflow-x: auto로 가리면 스크롤만 숨길 뿐 레이아웃은 여전히 깨진다
truncate가 안 먹으면 부모 체인 어딘가에 min-width:0이 빠진 것

자주 묻는 질문

min-width:0이 왜 필요한가요?

flex/grid item의 최소 크기 기본값이 auto라 콘텐츠보다 작아지지 못합니다. 0으로 명시해야 flex-shrink와 ellipsis가 동작합니다.

Grid에서도 같은 문제가 있나요?

네. grid-template-columns: 1fr 대신 minmax(0, 1fr)로 바꾸면 같은 원리로 해결됩니다.