Chrome의 Flexbox 열에서 '높이: 100%'가 예상대로 작동하지 않는 이유는 무엇입니까?

Flexbox 열의 높이 문제: Chrome 문제

Flexbox 열에서 높이 백분율을 사용하여 하위 요소의 크기를 조정할 때 어려움이 발생할 수 있습니다. 이 문제는 Chrome에서 Flexbox 사양을 처리할 때 발생하는 이상한 점에서 발생합니다.

다음 예를 고려하세요.

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

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

.flex {
  background: blue;
  flex: 1;
}

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

.static {
  background: green;
  width: 100%;
  height: 5rem;
}

빨간색 .flex-child 요소가 파란색 .flex 부모의 전체 높이입니다. 그러나 height:100%는 의도한 대로 작동하지 않습니다.

해결책:

이 문제를 해결하려면:

1. .flex를 수정하세요. 표시하려면: flex.
2. 에서 높이:100%를 제거하세요. .flex-child.

이 조정을 통해 .flex-child가 .flex 내의 전체 공간을 채우게 됩니다.

기술적 배경:

Flexbox에서 align-self:stretch(기본값)는 flexed의 교차 크기 속성(여기서는 높이)을 결정합니다. 요소. 그러나 백분율은 사용된 값이 아닌 지정된 교차 크기 값을 사용합니다. 이 경우 .flex-child는 .flex의 지정된 높이(기본적으로 자동)의 100%를 차지하려고 시도합니다. 이는 레이아웃 엔진을 혼란스럽게 합니다.

.flex를 표시하도록 설정: flex는 기본 동작을 무시하고 상위 수준 CSS가 .flex의 크기를 결정하도록 허용하여 문제를 해결합니다.

예외:

.flex를 부분적으로 채우려는 경우에는 이 솔루션이 작동하지 않습니다. 이를 달성하려면 flex:1을 사용하여 .flex 내에 .spacer 요소를 추가하고 flex-child를 flex:9(및 .flex의 flex-direction:column)로 설정하면 됩니다. 그러나 이것은 해킹이며 향후 브라우저 업데이트에서 이 문제가 해결되기를 바랍니다.

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