Internet Explorer 10 및 11에서 내 Flex 컨테이너의 '최소 높이'가 무시되는 이유는 무엇입니까?

Internet Explorer에서 Flex 컨테이너의 간과된 최소 높이

표준화된 Flexbox 속성에 대한 광범위한 지원에도 불구하고 Internet Explorer 10 및 11은 다음과 같은 경우 특이한 동작을 나타냅니다. 플렉스 컨테이너에 관한 것입니다. min-height 속성이 무시되면 이러한 문제 중 하나가 발생합니다.

각각 최대 높이가 400px인 두 개의 하위 div가 포함된 컨테이너 div를 생각해 보세요. CSS 플렉스 속성을 활용하여 justify-content: space-between; 하위 div 사이의 수직 공간을 균등하게 분배하기 위한 것입니다. 그러나 이 정렬은 Chrome 및 Firefox에서는 완벽하게 작동하지만 Internet Explorer에서는 작동하지 않습니다.

해결책은 Flex 컨테이너 자체를 Flex 항목으로 설정하는 데 있습니다. 간단하게 display: flex; 및 flex-direction: 열; body 요소에 대한 컨테이너의 min-height 속성은 Internet Explorer 10 및 11에서 준수됩니다. 이렇게 하면 하위 div 간의 적절한 공간 분배가 보장됩니다.

이 해결 방법은 Internet Explorer 버전 10 및 11과 관련된 flexbox 버그를 해결합니다. , 최신 브라우저 전반에서 일관된 동작을 보장합니다. 이 문제에 대한 자세한 내용은 https://github.com/philipwalton/flexbugs#flexbug-3에서 확인할 수 있습니다.

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