IE10 및 IE11에서 Flex 컨테이너의 'min-height'가 무시되는 이유는 무엇입니까?

IE에서 Flex 컨테이너 최소 높이 무시

IE10 및 IE11에서 Flexbox로 작업할 때는 표준화된 Flex 용어를 활용할 수 있어야 합니다. 그러나 사용자는 이러한 브라우저에서 플렉스 컨테이너의 min-height 속성이 존중되지 않는 문제에 직면했습니다.

지정된 HTML 구조는 각각 가변 높이를 갖는 두 개의 하위 div가 있는 컨테이너 div를 특징으로 합니다. 목표는 첫 번째 자식을 맨 위에, 두 번째 자식을 맨 아래에 배치하고 justify-content: space-between을 사용하여 두 자식 사이의 공간을 균등하게 분배하는 것입니다.

이 설정은 Chrome 및 Firefox, IE에서는 실패합니다. min-height 속성이 무시되어 컨테이너가 가장 높은 하위 요소의 높이를 차지하게 됩니다.

해결책은 IE의 Flexbox 렌더링과 관련된 알려진 문제를 해결하는 데 있습니다. GitHub의 flexbugs 문서(https://github.com/philipwalton/flexbugs#flexbug-3)에 따르면 이러한 브라우저 버전에는 플렉스 컨테이너의 최소 높이 속성과 관련된 문제가 있습니다.

문제를 해결하려면 간단히 플렉스 컨테이너 자체를 플렉스 아이템으로 만듭니다. 다음과 같이 CSS를 수정합니다.

body {
   display: flex;
   flex-direction: column;
}

이 변경으로 인해 컨테이너 div가 포함된 body 요소가 플렉스 항목이 됩니다. 결과적으로 컨테이너 div는 이제 해당 컨텍스트 내에서 flex 하위 항목으로 인식되고 min-height 속성이 존중됩니다.

개정된 JSFiddle은 이제 컨테이너가 지정된 min-height를 올바르게 준수하는 솔루션을 보여줍니다. .

위 내용은 IE10 및 IE11에서 Flex 컨테이너의 'min-height'가 무시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!