IE11 Flex 컨테이너에서 텍스트가 줄 바꿈되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

IE11의 Flex 컨테이너 랩 문제: 해결 방법 및 해결 방법

Flex 컨테이너를 활용하여 텍스트 요소를 정렬할 때 텍스트가 래핑은 Chrome과 IE11에서 다르게 동작합니다. 특히 IE11에서는 Flex 컨테이너 내의 텍스트가 줄 바꿈되지 않아 오버플로가 발생합니다.

알려진 버그 및 해결 방법

이것은 실제로 IE11에서 알려진 버그입니다. 이 문제를 해결하려면 Flex 컨테이너 내에서 하위 요소의 너비를 명시적으로 지정해야 합니다. 코드에 다음 CSS 규칙을 추가하면 래핑 문제가 해결됩니다.

.child {
  width: 100%;
}

대체 해결 방법

대체 해결 방법에는 flex-basis: 100% 또는 flex 사용이 포함됩니다. 하위 요소에 대해 1입니다. 또한 이러한 옵션은 IE11이 플렉스 컨테이너 내에서 블록 수준 하위 요소의 의도된 전체 너비 점유를 이해하고 존중하도록 합니다.

예

.child {
  flex-basis: 100%;
}

설명

IE11에서는 하위 항목을 인식하기 위해 명시적인 너비 선언이 필요합니다. 요소는 상위 Flex 컨테이너 내에서 사용 가능한 전체 공간을 차지해야 합니다. 이와 대조적으로 Chrome은 명시적인 선언 없이도 예상되는 래핑 동작을 나타냅니다.

위 내용은 IE11 Flex 컨테이너에서 텍스트가 줄 바꿈되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!