CSS | div 태그 나머지 height 채우기

2개의 자식 div가 있는 부모 div 태그의 첫 번째 div에 height가 정해져 있는 상황에서

나머지 자식 div에 height를 자동으로 설정해주고 싶었다.

 

---

#parent {
    height: 800px;
    display: flex;
    flex-direction: column;
}

#child1 {
    height: 110px;
    background-color: yellow;
}

#child2 {
    flex: 1;
    background-color: orange;
}

 

부모 태그에 "display: flex;" 속성을 추가하여 Flexbox를 활성화시키고,

"flex-direction: column;" 속성으로 자식 요소들을 세로로 정렬시킨다.

 

'child2' 영역에 "flex: 1;" 속성을 추가함으로써

'child1' 영역의 height를 제외한 나머지 공간을 모두 가질 수 있도록 설정한다.

 

---

Result