개발

Flex Box 사용시 자식 요소의 높이가 늘어나는 문제 해결 방법

34 views as of January 7, 2025.

문제

퍼블리싱 코드를 이리저리 만지다가 특이한 현상을 발견했다.

크아악!! 내 badge의 높이 상태가?

위 스샷처럼 타이틀 영역에 flex box로 스타일을 적용해둘때 flex box의 높이가 증가하면 그안의 요소들도 덩달이 높이가 전부 늘어나는 문제였다.

문제가 생겼던 해당 코드는 아래와 같다.

.grp_title {
    display: flex;
    width: 100%;

    .title + .badge {
        margin-left: auto;
    }
}Copy

특이할것도 없고, 나는 그냥 타이틀 우측에 뱃지를 둘때 끝에 붙이고 싶어서 flex를 사용한 경우였다.

신기해서 이리저리 검색해보니, 해당 문제는 flex box의 성질이라고 한다.

flex box는 자식요소에 디폴트로 flex: 1 1 auto; 의 속성을 부여한다고 하는데, 이때문에 자식 요소의 높이가 부모 요소의 높이만큼 자동으로 늘어나고 줄어드는 상태라고한다.

이럴땐 직접 flex grow, shrink, basis를 조정해주거나 자식의 display 속성을 변경하면 된다는데 가장 속편한 해결방법은 아래와 같다.

.grp_title {
    display: flex;
    width: 100%;
    align-items: center;

    .title + .badge {
        margin-left: auto;
    }
}Copy

그냥 align-items: center; 처럼 align-items 속성을 명시하면 된다고 한다.

그럼 아래같이 의도에 맞는 형태로 사용할 수 있다.

이제야 볼만해진 badge

구우우우웃!

#CSS #문제해결

0 개의 댓글

개발 카테고리의 다른 글