flex 안의 긴 텍스트가 줄어들지 않고 레이아웃을 밀어낸 이유

문제 발생

두 칸짜리 레이아웃에서 왼쪽에 긴 URL이 들어오자 오른쪽 칸이 화면 밖으로 밀려났습니다. flex: 1을 줬으니 알아서 줄어들 거라고 생각했습니다.

.row { display: flex; gap: 16px; }
.main { flex: 1; }                /* 줄어들지 않는다 */
.side { width: 240px; }

overflow: hidden을 넣으면 넘침은 사라지지만 내용이 잘렸고, word-break를 줘도 코드 블록에서는 소용이 없었습니다.

원인 분석

flex 아이템의 min-width는 기본값이 0이 아니라 auto 입니다. auto는 "콘텐츠의 최소 크기(자동 최소 크기)보다 작아지지 않는다"는 뜻입니다.

그래서 flex: 1(= flex-shrink: 1)이 있어도 줄어드는 데 바닥이 있습니다. 그 바닥은 안에 들어 있는 것 중 가장 줄어들지 않는 것 — 줄바꿈되지 않는 긴 단어, 긴 URL, white-space: pre인 코드 블록, min-width가 걸린 자식 — 이 결정합니다. 컨테이너보다 그 바닥이 크면 넘칩니다.

세로 방향(flex-direction: column)에서는 min-height: auto가 같은 역할을 합니다. 스크롤 영역이 부모 안에 갇히지 않고 계속 늘어나는 증상의 원인도 대부분 이것입니다.

해결 방안

1. 줄어들어야 하는 아이템에 min-width: 0을 줍니다. 한 줄이면 끝납니다.

.main { flex: 1; min-width: 0; }

세로 축이라면 min-height: 0입니다.

.column { display: flex; flex-direction: column; }
.column .scroll-area { flex: 1; min-height: 0; overflow-y: auto; }

2. 중첩된 flex/grid에는 모든 층에 걸어야 합니다. 중간의 한 층이라도 min-width: auto로 남아 있으면 거기서 축소가 멈춥니다. 이 프로젝트의 글쓰기 화면도 편집기가 남은 높이를 차지하도록 조상마다 flex: 1; min-height: 0을 연결해 두었습니다.
3. overflow: hidden은 부작용으로 같은 효과를 냅니다. overflow가 visible이 아니면 자동 최소 크기가 0이 되기 때문입니다. 다만 내용이 잘리므로 의도를 표현하는 방법으로는 min-width: 0이 낫습니다.
4. 긴 문자열 자체를 다루려면 별도 속성이 필요합니다. 최소 크기를 풀어도 URL은 여전히 한 줄로 이어집니다.

.main { overflow-wrap: anywhere; }

5. grid에서도 같은 문제가 있습니다. 1fr은 minmax(auto, 1fr)이라 같은 바닥을 갖습니다. minmax(0, 1fr)로 쓰면 해결됩니다 — 이 저장소의 헤더 그리드가 minmax(0, 1fr)을 쓰는 이유입니다.

공식 문서

• MDN: min-width
• MDN: flex 아이템의 자동 최소 크기
• MDN: minmax()