[CSS] display:flex & overflow-y:auto 적용기

참고 블로그 이 분 글 보고 다 고쳤다 ㅠㅠ 감사합니다.

현재 CSS 레이아웃

현재 구조상 세로로 길어져야 되는 부분이 많다. 그리고 전체 레이아웃은 grid 시스템을 사용하여 골격을 잡은 상태다. column은 12칸으로 쪼개줬으나, 안의 영역은 비례에 맞춰서 화면에 꽉 차게 늘어나야 한다. 따라서 전체 레이아웃은 grid로 잡고 내부 컴포넌트는 flex로 조정해줬다.

남은 공간에 꽉 차게 하기 - flex-grow: 1;

display:flex; 속성을 사용하여 공간을 할당한 다음에는 넓이/높이가 지정된 요소 외에 남은 공간을 꽉 차게 하려면 해당 속성에 flex-grow: 1;을 부여해주면 된다.

auto scroll

div 내 공간을 넘어가면 세로 방향 스크롤이 생기도록 하고 싶었는데 아무리 자식 요소에 overflow-y: auto;를 부여해도 부모가 길어지는 문제가 생겼다. 그렇다고 height를 강제로 지정해버리면 반응형 레이아웃을 하지 못하는 단점이 있었다.

위의 블로그를 보고 깨달은 것은 display:flex를 선언한 요소에 모두 overflow-y: auto;를 적용하면 된다는 것이다.

눈물... 드디어 이제 영역 내에서 스크롤이 생긴다!!