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

Flexbox: Internet Explorer에서 Min-Height가 무시됨

Internet Explorer(IE)에서 표준화된 Flexbox 용어를 사용하여 Flex 컨테이너를 구현하려고 할 때 버전 10 및 11에서는 지정된 최소 높이 속성이 무시되는 문제가 사용자에게 발생할 수 있습니다. 컨테이너 높이가 최소값으로 제한되지 않기 때문에 이로 인해 예기치 않은 동작이 발생할 수 있습니다.

문제:

두 개의 하위 div가 있는 플렉스 컨테이너가 예기치 않은 높이 동작을 나타냅니다. IE에서. 하위 div의 높이가 400px 미만이지만 컨테이너의 최소 높이 속성인 400px이 무시되어 컨테이너가 justify-content: space-between 속성을 수용하도록 확장되지 않습니다. 이렇게 하면 첫 번째 하위 div가 위쪽에 정렬되고 두 번째 하위 div가 아래쪽에 정렬되지 않습니다.

해결 방법:

IE 10 및 11. 플렉스 컨테이너 자체를 플렉스 아이템으로 만드는 것이 필요하다. 이는 다음 CSS를 코드에 추가하여 달성할 수 있습니다.

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

body 요소를 플렉스 항목으로 설정하면 컨테이너 div가 플렉스박스 속성을 상속하고 min-height 속성을 올바르게 준수합니다.

수정된 예:

Flex 항목 수정으로 업데이트된 코드는 개정된 바이올린:

<div>

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