Flexbox 레이아웃 버그 트러블슈팅 - IE11 min-height 이슈

문제 상황

관리자 페이지 사이드바 레이아웃을 Flexbox로 구현하던 중 IE11에서만 하단 버튼 영역이 제대로 표시되지 않는 이슈가 발생했다. Chrome과 Firefox에서는 정상 동작했다.

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

.content {
  flex: 1;
}

.footer {
  margin-top: auto;
}

IE11에서는 .content 영역이 내용물만큼만 높이를 차지하고 .footer가 하단에 고정되지 않았다.

원인

IE11의 Flexbox 구현 버그였다. flex container에 min-height를 사용할 경우, 자식 요소의 flex: 1이 제대로 계산되지 않는다. IE11은 min-height를 높이 계산의 기준으로 인식하지 못한다.

해결 방법

height: 100vh를 직접 지정하거나, wrapper div를 추가하는 방법도 있지만 더 간단한 방법을 찾았다.

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

.content {
  flex: 1 0 auto; /* flex-shrink: 0, flex-basis: auto 명시 */
}

flex-basis: auto를 명시적으로 설정하니 IE11에서도 정상 동작했다.

추가 발견

IE11 Flexbox 관련 버그는 꽤 많은 편이다. flex-basis와 flex-shrink 계산 로직이 표준과 다른 경우가 많아서, 축약형 flex: 1 대신 풀 버전으로 명시하는 게 안전하다는 걸 배웠다.

Autoprefixer가 -ms- prefix는 자동으로 추가해주지만, 이런 동작 차이까지는 해결해주지 못한다. 결국 실제 IE11 테스트가 필수다.