세로로 쌓이는 화면에서만 페이지가 818px로 늘어난 이유 — align-items: flex-start

문제 발생

활동 잔디밭(가로로 긴 SVG)과 옆의 연도 목록을 데스크톱에서는 나란히, 휴대폰에서는 위아래로 쌓는 화면이었습니다. 잔디밭에는 overflow-x: auto를 제대로 걸어 뒀는데, 390px 화면에서 페이지 전체가 818px로 늘어나 옆으로 밀렸습니다.

.layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

@media (max-width: 720px) {
  .layout {
    flex-direction: column;
  }
}

.graph {
  overflow-x: auto;
}

화면에는 오른쪽 빈 공간만 보이고 어느 요소가 범인인지 드러나지 않았습니다.

원인 분석

교차축이 바뀌었는데 정렬 값은 그대로였습니다. align-items는 flex 항목을 교차축에서 정렬합니다. 가로 배치(row)에서 교차축은 높이라 flex-start는 "위로 붙이기"였습니다. 세로 배치(column)로 바꾸면 교차축이 너비가 되고, 같은 flex-start는 "왼쪽으로 붙이고 늘리지 않기"가 됩니다.

명세의 초기값은 stretch입니다. stretch였다면 항목의 너비가 컨테이너에 맞춰졌을 것이고, 그 안에서 overflow-x: auto가 스크롤을 만들었을 것입니다. flex-start는 항목을 콘텐츠 크기로 두는데, 잔디밭 SVG는 고정 너비(802px)라 항목의 최소 콘텐츠 너비가 곧 802px입니다. 항목이 컨테이너(358px)보다 넓어지니 overflow-x: auto는 자기 안에서 넘칠 것이 없어 아무 일도 하지 않고, 대신 항목 자체가 페이지를 밀어냅니다.

찾는 방법은 눈이 아니라 수치입니다. document.documentElement.scrollWidth가 뷰포트보다 크면 넘친 것이고, 조상마다 getBoundingClientRect().width를 찍어 부모보다 넓은 자식을 찾습니다. "부모는 358인데 자식이 802"인 곳이 범인입니다.

해결 방안

1. 세로로 바꾸는 미디어 쿼리에서 정렬도 같이 바꿉니다. 초기값으로 되돌리는 것뿐입니다.

@media (max-width: 720px) {
  .layout {
    flex-direction: column;
    align-items: stretch;
  }
}

2. 한 항목만 늘려야 하면 align-self: stretch를 그 항목에 줍니다. 나머지는 flex-start를 유지할 수 있습니다.

3. min-width: 0은 이 경우의 답이 아닙니다. 그 속성은 flex 항목이 주축에서 콘텐츠보다 작아질 수 있게 하는 것이고, 여기서는 교차축 정렬이 항목을 늘리지 않는 것이 문제입니다. 증상이 비슷해 보여도 축이 다릅니다.

4. 데스크톱에서는 반대 문제를 확인합니다. stretch로 바꾸면 가로 배치에서 패널이 그래프보다 높아질 수 있습니다. 세로 배치에만 적용하고, 필요하면 flex: 0 1 auto로 내용에 맞춥니다.

5. 넘침 검사를 자동화합니다. 390px에서 scrollWidth > clientWidth인 페이지를 스크립트로 훑으면 이 종류의 회귀가 다음에도 잡힙니다.

공식 문서

• CSS Flexible Box Layout Module Level 1: align-items
• MDN: align-items