IE에서 Flex 컨테이너의 'min-height'가 무시되는 이유는 무엇이며 어떻게 해결할 수 있습니까?

IE에서 Flex 컨테이너의 최소 높이가 무시됩니다

IE 브라우저는 Flexbox 렌더링과 관련하여 악명 높은 역사를 가지고 있습니다. 이러한 문제 중에서 최소 높이는 플렉스 컨테이너의 특별한 문제로 나타납니다. 표준의 기대에도 불구하고 IE10과 IE11은 최소 높이 속성을 무시합니다.

컨테이너 div에 두 개의 하위 div가 있는 시나리오를 생각해 보세요. 하위 항목의 크기는 400px 미만이므로 justify-content: space-between을 위한 충분한 공간을 보장합니다. 목표는 첫 번째 자식을 위쪽에, 두 번째 자식을 아래쪽에 정렬하는 것입니다. 이 설정은 Chrome 및 Firefox에서는 완벽하게 작동하지만 IE에서는 작동하지 않습니다.

이 문제의 근본 원인은 특정 Flexbox 버그(Flexbug 3)에 있습니다. 이 문제를 해결하려면 간단한 해결 방법으로 Flex 컨테이너를 Flex 항목 자체로 변환합니다. 다음 CSS 규칙을 추가하면 이를 달성할 수 있습니다.

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

이 CSS를 통합하면 추가 수정 없이 문제가 해결됩니다.

자세한 내용은 공식 Flexbug 저장소(https:)를 참조하세요. //github.com/philipwalton/flexbugs#flexbug-3. 이 저장소는 다양한 Flexbox 버그에 대한 통찰력을 제공하고 효과적인 해결 방법을 제공합니다.

위 내용은 IE에서 Flex 컨테이너의 'min-height'가 무시되는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!