CSS flexbox Error: flex-grow 속성과 flex-basis 값 설정의 중요성

레이아웃을 짜던 중에 다음과 같이 엣지가 맞지 않는 현상이 생겼다.

section 1,2의 세로 길이 합과 section 4의 세로 길이를 모두 같게 하고 싶어서, flex 속성을 다음과 같이 잡았었는데 이와 같은 결과가 나온 것이다.

/*section1, 2*/

flex: 2 1 auto;


/*section 3*/

flex: 1 1 auto;


/*section 4*/

flex: 4 1 auto;


/*section 5*/

flex: 1 1 auto;

분명히 부모컨텐트의 세로 너비는 모두 같았기 때문에, flex-grow 속성을 잡아주면 비율이 꼭 들어맞을 것이라고 생각을 했었다.
유어클래스 내용을 읽어보니, flex-grow 속성을 비율대로 맞춘다고 해서 실제 박스의 width나 height도 꼭 맞아떨어지는 건 아닌 것 같았다. 그렇다면 도대체 어떤 속성값을 변경을 해야 하는 건지..?
그래서 헤로피님 블로그에서 flex관련 속성을 찾아보았다.

flex-grow 속성을 잡아주더라도, 의도한 대로 width, height 비율이 꼭 들어맞지 않을 수 있은 이유는, flex-basis에서 설정해준 값 때문인 것 같았다.

flex-basis가 auto인 경우에는 박스 내의 내부 컨텐트의 기본 크기를 제외한 나머지 높이끼리의 비율이, flex-grow에 의해서 조정되었기 때문에, 내가 예상했던 것과 다른 결과가 나왔었다. 그림으로 설명한다면 다음과 같을 것이다.

(우분투에 그림판이 없어서 flex-basis를 무슨 이상한? 에디터로 표시해봤다)
저 검정 테두리로 네모친 부분을 제외한, 나머지 높이끼리의 비율을 flex-grow로 맞춰주다 보니 이런 현상이 생긴것이다.

flex-basis가 auto이면, 박스가 크기가 조정되기 전의 기본 사이즈를 말하는데 이를 고려하지 않아 생긴 문제였다. 이 속성을 0으로 주면 박스의 기본 너비나 높이가 없다고 보기 때문에, flex-grow 속성을 통해서 원하는 비율대로 조정이 가능한 것이다..!

그래서 실제로 auto값을 0으로 바꾸었더니, 다음과 같이 해결할 수 있었다.