CSS Flexbox를 사용하여 컨테이너의 남은 세로 공간을 채우는 방법은 무엇입니까?

남은 세로 공간을 #second로 채우기

#first 아래 #wrapper의 남은 세로 공간을 #second div로 채우려면 CSS만 사용하면 다음 단계를 수행할 수 있습니다.

1. 여백 없이 높이를 100% 차지하도록 html과 본문을 설정합니다.
2. display: flex, flex-direction: 열을 상위 컨테이너 .wrapper.
3. 특정 높이를 .first에 지정합니다.
4. flex-grow: 1을 .second로 설정하여 나머지 공간을 차지하도록 늘립니다.

CSS 코드는 다음과 같습니다.

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

위 내용은 CSS Flexbox를 사용하여 컨테이너의 남은 세로 공간을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!