Flexbox 레이아웃에서 IE11 버그 해결했던 기록

문제 상황

사이드바와 메인 컨텐츠를 Flexbox로 레이아웃을 구성했는데, IE11에서만 사이드바가 제대로 렌더링되지 않았다. Chrome과 Firefox에서는 정상 작동했다.

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

.sidebar {
  flex: 0 0 250px;
  background: #f5f5f5;
}

.main {
  flex: 1;
}

원인

IE11은 flex container의 자식 요소에 min-height가 적용될 때 높이 계산을 제대로 하지 못하는 버그가 있었다. flex direction이 column일 때 특히 문제가 됐다.

해결

IE11을 위한 워크어라운드를 추가했다.

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

.sidebar {
  flex: 0 0 250px;
  background: #f5f5f5;
  /* IE11 fix */
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  /* IE11 fix */
  min-height: 1px;
}

min-height: 1px을 추가하면 IE11이 flex item의 높이를 올바르게 계산했다.

교훈

Flexbox는 편리하지만 IE11 지원이 필요한 프로젝트에서는 매번 크로스 브라우징 테스트가 필수다. Autoprefixer를 사용하고 있지만, 레이아웃 버그는 자동으로 해결되지 않는다.

Can I Use에서 확인해보니 IE11의 Flexbox 구현은 partial support 상태다. 다음부터는 복잡한 레이아웃 작업 전에 브라우저별 이슈를 먼저 확인하는 습관을 들여야겠다.