안녕하세요 선생님. 아래 사진은 현재 flex-grow 를 하지 않은 상태입니다. height의 값이 세번째 카드에 맞춰져서 높이가 맞춰진걸 확인할 수 있는데요 이게 왜 이렇게 적용이 자동으로 되는걸까요? 
<img src="https://cdn.inflearn.com/public/files/posts/d546ae22-0ba9-475f-a1f7-c0498a03e1ef/no-grow.png" title="no-grow.png" width="500" height="235" alt="" />

.card-item은 플렉스 컨테이너인 동시에 플렉스 아이템입니다.
.card-item 입장에서 보면 .card-list가 플렉스 컨테이너인데요, align-items의 기본값이 stretch이기 때문에 플렉스 아이템인 .card-item이 플렉스 컨테이너인 .card-list의 높이 만큼 세로로 늘어나서 딱 맞는 것입니다.
flex-grow로 .card-desc의 높이를 늘려주는 것은 .card-item이 플렉스 컨테이너로서 동작할 때 관련있는 것인데요, 플렉스 아이템인 .card-desc가 플렉스 컨테이너인 .card-item에 꽉 차도록 flex-grow를 설정해서 높이를 늘려주는 것이지요~ .card-item의 flex-direction은 column이기 때문에, flex-grow의 영향이 세로 방향으로 적용되는 것이고요.

인프런 커뮤니티 질문&답변

height 관련 여쭤보고싶습니다 선생님