[CSS] flex-shrink를 이용한 모달 버튼 크기 유지 및 스크롤 문제 해결

 

웹 페이지에서 모달 창을 만들 때, 긴 내용이 들어가거나 화면 크기에 따라 콘텐츠가 자동으로 스크롤되도록 max-height와 overflow-y: auto 속성을 사용하는 경우가 많다.

하지만 이렇게 설정하면 모달 창 내부의 요소들이 의도치 않게 크기가 줄어드는 경우가 발생할 수 있다.

이 글에서는 이런 현상을 해결하는 방법과 CSS flex-shrink 속성을 사용해 버튼 크기를 안정적으로 유지하는 방법을 소개하려고 한다!

 

 

 

 

모달 창을 디자인하면서 아래와 같은 스타일을 적용했다:

 

.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    max-width: 450px;
    max-height: 700px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

 

 

 

<div class="modal" style="display: block;">
    <div class="modal-content">
        <p>모달에 대한 내용</p>
        <button class="confirm-btn primary-bg white-color">확인</button>
    </div>
</div>

 

 

 

여기서 max-height와 overflow-y: auto를 사용해 모달 창의 길이가 최대치를 넘으면 스크롤이 생기도록 했다.

 

근❗런❗데❗

이 설정과 함께 display: flex 속성을 사용하니 내부 버튼의 크기가 의도치 않게 줄어들었다.

 

 

 

flex-shrink란?

찾아보니까  flex-shrink 속성의 기본값이 1로 설정되어 있어, 이 값이 적용된 요소는 공간이 부족할 때 크기가 줄어드는 특성이 있었다.

이를 해결하기 위해, .confirm-btn 클래스에 flex-shrink: 0; 속성을 추가해 버튼이 줄어들지 않도록 설정했다

 

 

flex-shrink: 0; 요소의 크기가 절대 줄어들지 않음

flex-shrink: 1; 부모 요소의 공간이 부족할 때 비율에 맞게 크기가 줄어듦

flex-shrink: n; 1보다 크기가 더 줄어듦

 

 

.confirm-btn {
    width: 100px;
    height: 36px;
    padding: 0px;
    margin: 15px;
    border: 1px solid #999999;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0; /* 크기 줄어들지 않도록 설정 */
}

 

 

 

 

이렇게 설정한 결과, 모달 창의 내부 스크롤과 상관없이 버튼의 크기가 의도한 대로 유지되었다.