CSS Box Model 트러블 슈팅: Flex Container 내부 요소 크기 문제

문제 상황

Flex container 내부의 카드 요소들이 의도한 크기(160px)보다 작게 표시되는 현상 발생

.cards-track {
    display: flex;
    padding: 20px 0;
    gap: 2rem;
    width: max-content;
}

.card {
    width: 160px;
    height: 160px;
    padding: 2rem;
    border: 3px dashed;
}

원인 분석

1. 전역 CSS 설정의 영향

*, *:before, *:after {
    box-sizing: inherit;
}

• 모든 요소가 상위 요소의 box-sizing 값을 상속
• 일반적으로 border-box가 적용됨

2. Box Model 계산 방식

• border-box: width/height에 padding과 border가 포함
• content-box: width/height는 순수 콘텐츠 영역만 계산

3. Flex Container의 영향

• flex 레이아웃의 크기 계산 알고리즘이 box-sizing과 상호작용
• 명시적 크기 지정이 없을 때 flex의 자연스러운 크기 조절 발생

해결 방법

.card {
    box-sizing: content-box;
    width: 160px;
    height: 160px;
    padding: 2rem;
    border: 3px dashed;
}

해결 원리

1. box-sizing: content-box 지정으로 상속된 box-sizing 값을 덮어씀
2. width/height가 순수 콘텐츠 영역만을 의미하게 됨
3. padding과 border가 지정된 크기에 추가로 계산됨

대안적 해결 방법들

1. flex 속성 직접 제어

.card {
    flex: 0 0 160px !important;
}

2. 래퍼 요소 추가

<div class="card-wrapper">
    <div class="card">...</div>
</div>

.card-wrapper {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

학습 포인트

1. CSS Box Model의 계산 방식 이해
2. 전역 CSS 설정이 미치는 영향 파악
3. Flex Layout과 Box Model의 상호작용 이해
4. CSS 상속과 명시도의 중요성

예방을 위한 제안

1. Box Model 동작 방식을 프로젝트 초기에 명확히 설정
2. 컴포넌트별 독립적인 box-sizing 전략 수립
3. Flex Container 사용 시 자식 요소의 크기 계산 방식 고려

이 문제는 CSS의 기본 개념들이 실제 레이아웃에 어떻게 영향을 미치는지 잘 보여주는 사례입니다.