CSS Grid와 Flexbox 혼용 시 레이아웃 깨짐 해결

문제 상황

대시보드 레이아웃을 Grid로 구성하고, 각 셀 내부를 Flexbox로 배치했는데 특정 케이스에서 자식 요소가 부모를 뚫고 나가는 현상이 발생했다.

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1;
  overflow: hidden;
}

긴 텍스트나 이미지가 들어가면 카드가 grid 컬럼을 무시하고 늘어났다.

원인

Grid 아이템의 기본 min-width 값이 auto이기 때문이다. Flexbox도 마찬가지로 min-width: auto가 기본값이라 자식 요소의 콘텐츠 크기를 최소값으로 인식한다.

해결

.card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* 추가 */
}

.card-content {
  flex: 1;
  overflow: hidden;
  min-width: 0; /* 추가 */
}

min-width: 0을 명시하면 Grid와 Flex 아이템이 부모의 크기 제약을 따른다. overflow: hidden과 함께 사용하면 텍스트 말줄임 처리도 정상 작동한다.

교훈

Grid/Flexbox는 편리하지만 기본 동작 방식을 모르면 예상치 못한 레이아웃 버그가 생긴다. 특히 중첩 사용 시 min-width/min-height 기본값을 항상 염두에 둬야 한다. IE11도 지원해야 해서 autoprefixer 설정도 함께 점검했다.