flex : 1, overflow : auto issue !

<div className="flex flex-col w-full h-full">
    <div className="flex-1 flex flex-col overflow-auto">
        ...
    </div>
    <div></div>
</div>

이런 html 구조가 있다. tailwind로 간단히 작성했다.

.div1 {
    flex : 1;
    display : flex;
    flex-direction : column;
    overflow : auto;
}

첫번째 div는 이런 스타일이 적용이 되어 있는 상태이다.

flex : 1 은 간단하게 설명해서 기본 크기를 0으로 설정하고, 유연하게 늘어나거나 줄어들 수 있게 된다.
두번째 div 에는 해당 속성이 적용이 안되어있어서 첫번째 div가 두번째 div를 제외한 크기를 차지하게 된다.

이렇게만 보면 첫번째 div는 전체에서 가능한 만큼의 공간을 차지하고 내부 컨텐츠가 늘어남에 따라 스크롤이 생길 것으로 예상이 되는데 실제론 그렇게 안된다.

https://stackoverflow.com/questions/63475073/css-flex-basis-0-has-different-behaviour-to-flex-basis-0px/63475286#63475286

해당 글에 내용이 잘 설명되어있다.

요약하면 flex : 1은 flex-basis를 0% 로 설정해서 부모의 크기의 영향을 받기 때문이다. 그래서 직접 basis를 0px로 설정해주면 된다.