Flexbox 열에서 백분율 높이가 예상대로 작동하지 않는 이유는 무엇입니까?

Flexbox 열의 백분율 높이 문제

Flexbox 레이아웃에서는 Flexbox 열의 하위 요소가 높이를 채우는 것이 바람직한 경우가 많습니다. 그러나 높이를 백분율로 설정하면 예상한 결과가 나오지 않는 문제가 발생할 수 있습니다.

설명

Flexbox 사양에 따르면 요소의 교차 크기 속성은 (이 경우 높이)는 지정된 값과 사용된 값을 사용합니다. 백분율 높이는 사용된 높이가 아닌 상위 항목의 지정된 높이를 기준으로 계산됩니다.

해결책

Chrome에서 이 문제를 해결하려면:

1. 표시할 상위 컨테이너(.flex) 설정: flex.
2. 높이 제거: 100%; 하위 요소(.flex-child)의 규칙.

예:

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
  display: flex; /* Added */
}

.flex-child {
  background: red;
  width: 100%; /* Removed height: 100%; */
  display: block;
}

부분 채우기에 대한 대체 접근 방식

상위 용기의 일부만 채우려는 경우 추가 플렉스 자식(.spacer)을 추가하여 남은 공간을 차지할 수 있습니다.

.flex-child {
  flex: 9;
}

.spacer {
  flex: 1;
}

결론

지정된 값과 사용된 값의 차이를 이해함으로써 개발자는 이를 극복할 수 있습니다. Flexbox 열의 백분율 높이 문제. 경우에 따라 브라우저별 해결 방법이 필요할 수 있지만 향후 사양 업데이트를 통해 이러한 제한 사항이 해결될 것으로 예상됩니다.

위 내용은 Flexbox 열에서 백분율 높이가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!