width: max-content 를 넣으니 드롭다운이 680px 이 됐다

드롭다운을 열었는데 목록의 글자가 한 자씩 접혀 있다.

8/9 · 스
캔 107
회

2026-08-09 에 본 화면이다. 원인은 금방 보였다. 목록 상자가 absolute 라 자기 폭을 「감싸는 상자」 안에서만 정하는데, 그 감싸는 상자가 버튼이었고 버튼 폭이 68px 이었다. 목록이 68px 에 갇혀 글자가 접힌 것이다.

CSS 에는 이럴 때 쓰는 값이 있다. width: max-content — 내용에 맞게 커져라. 한 줄 넣고 새로고침했다. 접힘은 사라졌다. 그런데 목록이 680px 이 됐다. 화면의 절반이다.

너 갑자기 왜 이러지? 반항하는 거임?

max-width 로 가리려다 말았다

첫 대응은 상한을 거는 것이었다. max-width: 320px. 넣으니 화면은 멀쩡해졌다.

그런데 이게 답이 아니었다. 680px 이 나온 이유를 모른 채 320px 로 가린 것이기 때문이다. 내용이 200px 쯤인데 320px 로 잡히면, 그건 「내용에 맞게」가 아니라 「덜 이상하게」다.

여기서 갈렸다.

원인은 목록이 아니라 그 안의 항목에 있었다. 항목마다 이렇게 되어 있었다.

width: 100%    /* 부모 폭의 100% */

부모(목록)는 max-content 로 자식들을 보고 자기 폭을 정하는 중인데, 그 자식이 아직 정해지지도 않은 부모 폭의 100% 를 요구하고 있었다. 서로를 쳐다보는 상태다.

접혀 있을 때는 부모 폭이 68px 로 고정돼 있어서 이 모순이 드러나지 않았다. 갇힌 걸 푸는 순간 드러난 것이다. 「갑자기 이상해졌다」가 아니라, 원래 있던 모순이 눈에 보이게 된 것이었다.

항목에서 퍼센트를 걷어냈다. 그러자 이번엔 선택 표시가 글자 크기만큼만 칠해졌다. 항목이 폭을 스스로 정하게 뒀더니 글자만큼만 차지한 것이다. (<button> 은 폼 요소라 display: block 을 줘도 폭이 auto 면 내용 크기로 줄어든다.)

두 요구가 부딪히는 것처럼 보였다. 폭은 내용이 정해야 하고, 동시에 항목은 그 폭에 꽉 차야 한다. 퍼센트로는 둘을 같이 못 한다.

세로 flex 가 둘을 한꺼번에 풀었다.

목록:  flex-direction: column    /* 폭 = 가장 긴 항목 */
항목:  (폭 지정 없음)            /* stretch 로 저절로 꽉 참 */

세로 flex 는 폭을 「가장 긴 항목」으로 정하고, 그다음 항목들을 그 폭까지 늘린다. 순서가 있으니 서로를 쳐다보지 않는다. 퍼센트가 필요 없어진다.

처음엔 이 수정을 공통 컴포넌트에 넣었다. 그러면 그걸 쓰는 드롭다운 일곱 곳에 한꺼번에 걸린다. 세어 보니 그중 넷이 항목에 퍼센트를 쓰고 있었다. 켜는 순간 넷이 같이 터질 참이었다.

그래서 공통은 원래대로 두고, 항목까지 내가 쥐고 있는 컴포넌트 하나에서만 켰다.

무언가를 풀어줬는데 반대쪽으로 터진다면 한 번 물어볼 만하다. 내가 없앤 그 제약이, 다른 모순을 가려주고 있진 않았나. 새 제약(상한)을 씌우기 전에, 눌려 있던 게 무엇이었는지부터 보는 편이 빠르다.