Flex 하위 요소를 늘려 컨테이너 높이를 채우는 방법

Flexbox로 작업할 때 하위 요소가 다음과 같은 문제에 직면하는 것이 일반적입니다. 컨테이너의 전체 높이까지 늘어나지 않습니다. 이는 종종 height: 100% 속성을 잘못 사용했기 때문에 발생합니다.

Flexbox에서 height: 100% 속성은 다음과 같은 이유로 문제가 될 수 있습니다.

• 상위 요소에 고정된 속성이 필요합니다. 이는 Flexbox의 원칙에 위배됩니다.
• 여러 하위가 있는 경우 한 하위에 height: 100%를 사용하면 다른 하위는 무시됩니다.

해결책은 height: 100% 속성이며 Flexbox의 기본 동작을 사용합니다. 기본적으로 행 방향(일반적인 레이아웃)의 플렉스 항목은 align-items: Stretch 속성을 사용하여 수직으로 정렬됩니다. 즉, 하위 요소는 컨테이너의 사용 가능한 높이를 채우기 위해 자동으로 늘어납니다.

다음은 높이 없이 올바른 사용법을 보여주는 예입니다. 100%:

  

  

    some

    cool

    text
  

이 예에서 노란색 하위 항목은 파란색 하위 항목의 텍스트 높이에 관계없이 컨테이너 높이를 채우기 위해 늘어납니다. 이는 기본 align-items: Stretch 값이 플렉스 항목이 사용 가능한 공간을 차지하도록 수직으로 늘어나도록 보장하기 때문입니다.