IE가 Flex 컨테이너의 'min-height' 속성을 무시하는 이유는 무엇입니까?

Flex 컨테이너의 최소 높이를 무시하는 IE

Internet Explorer 10 및 11에서 Flex 컨테이너는 최소 높이와 관련하여 예상치 못한 동작을 보일 수 있습니다. 높이 속성. Flex 컨테이너는 정의된 최소 높이를 준수해야 하지만 IE 브라우저는 이를 무시합니다.

이 문제를 해결하기 위해 Flex 컨테이너 자체를 Flex 항목으로 만드는 해결 방법이 있습니다. CSS에 다음 코드를 추가하면

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

전체 페이지를 Flex 컨테이너로 효과적으로 변환할 수 있습니다. 이를 통해 Flex 컨테이너는 의도한 레이아웃을 유지하면서 IE의 최소 높이 속성을 준수할 수 있습니다.

예:

두 개의 하위 div가 있는 Flex 컨테이너를 생각해 보세요. 컨테이너의 최소 높이는 400px이고 하위 div는 400px보다 크지 않습니다. Chrome 및 Firefox에서는 레이아웃이 예상대로 하나의 하위 항목이 상단에 있고 다른 하위 항목이 하단에 있습니다. 그러나 IE에서는 min-height 속성을 무시하고 컨테이너가 내용 높이까지 축소됩니다.

해결책:

이 문제를 해결하려면 해결 방법은 본문을 플렉스 컨테이너로 만드는 것입니다. 수정된 코드는 다음과 같습니다.

<div>

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