Flexbox 레이아웃 IE11 대응 정리

문제 상황

반응형 대시보드 개편 작업에서 Flexbox를 전면 도입했다. Chrome과 Firefox에서는 문제없었지만 IE11에서 레이아웃이 깨지는 현상이 여러 곳에서 발생했다.

주요 이슈

1. flex-basis auto 버그

IE11은 flex-basis: auto를 제대로 계산하지 못한다. 명시적으로 값을 지정해야 했다.

/* 문제 있던 코드 */
.item {
  flex: 1;
}

/* 수정 */
.item {
  flex: 1 1 0%; /* IE11에서는 0%로 명시 */
}

2. min-height와 flex 자식 요소

부모에 min-height만 지정하면 자식 flex 아이템이 늘어나지 않았다.

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* IE11 대응 */
.container {
  display: flex;
  height: 100vh; /* IE11에서는 height 명시 필요 */
  flex-direction: column;
}

3. flex 단축 속성 버그

flex: 1처럼 단일 값만 쓰면 예상과 다르게 동작했다. 세 값을 모두 명시하는 게 안전했다.

.sidebar {
  flex: 0 0 250px; /* grow shrink basis 모두 명시 */
}

.content {
  flex: 1 1 auto;
}

해결 방법

Autoprefixer를 Webpack에 추가해 벤더 프리픽스 자동 처리
flex 속성은 항상 3개 값 모두 명시
IE11 테스트를 배포 전 체크리스트에 포함

참고

Flexbugs 저장소를 참고하면 IE11 관련 이슈를 미리 파악할 수 있다
결국 프로젝트 요구사항에서 IE10 지원은 제외하고 IE11만 대응하기로 결정했다