Chrome의 Flexbox 열 하위 항목에서 '높이: 100%'가 작동하지 않는 이유는 무엇입니까?

Flexbox 열 하위에서 높이 100%가 작동하지 않음: 브라우저 관련 버그

Flexbox 열 내의 하위 요소가 발생하는 문제에 직면했습니다. 키 비율에 반응하지 않습니다. 이 문제는 Chrome에서 확인되었으며 다른 브라우저에는 영향을 미치지 않을 수 있습니다.

코드 샘플에서:

• .flexbox는 열 방향이 있는 Flexbox 컨테이너로 표시되도록 설정되어 있습니다.
• .flex는 flexed 요소입니다.
• .flex-child는 하위 요소입니다. .flex.

.flex-child를 높이: 100%로 설정하면 상위인 .flex의 세로 공간을 채우지 못합니다.

해결책:

이 문제를 해결하려면 다음을 수행하세요. 수정 사항:

• .flex를 flexbox로 표시하도록 변경: .flex { display: flex; }.
• .flex-child에서 height: 100% 스타일을 제거합니다.

이 변경을 통해 .flex-child 요소가 .flex 내에서 사용 가능한 수직 공간을 채울 수 있습니다.

설명:

flexbox 사양에 따르면 align-self: Stretch(플렉스 요소의 기본값)는 요소의 교차 크기 속성(이 경우 높이)에 사용된 값에만 영향을 미칩니다. 그러나 백분율은 사용된 값이 아닌 상위의 교차 크기 속성에 지정된 값을 기준으로 계산됩니다.

.flex에 지정된 높이가 없으므로 기본 높이는 "auto"입니다. .flex-child를 height: 100%로 설정하면 Chrome은 .flex의 지정된 값인 'auto'를 기준으로 높이를 계산합니다. 따라서 "auto"는 "필요한 만큼 크다"는 의미이므로 .flex-child의 높이는 0이 됩니다.

.flex를 flexbox로 표시하도록 변경하면 명시적으로 flex 방향을 행으로 설정하게 됩니다. . 이를 통해 .flex-child가 예상대로 .flex의 높이를 적절하게 채울 수 있습니다.

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