플렉스 컨테이너의 텍스트가 IE11에서 줄 바꿈되지 않습니다.

다음 스 니펫을 고려하십시오.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Chrome에서 텍스트가 예상대로 줄 바꿈됩니다.

그러나 IE11에서는 텍스트가 줄 바꿈되지 않습니다 .

이것은 IE의 알려진 버그입니까? (그렇다면 포인터가 높이 평가 될 것입니다)

알려진 해결 방법이 있습니까?

이 비슷한 질문 에는 명확한 대답과 공식적인 포인터가 없습니다.

이것을 코드에 추가하십시오 :

.child { width: 100%; }

우리는 블록 수준의 자식이 부모의 전체 너비를 차지해야한다는 것을 알고 있습니다.

크롬은 이것을 이해합니다.

어떤 이유로 든 IE11은 명시적인 요청을 원합니다.

사용 flex-basis: 100%하거나 flex: 1작동합니다.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

참고 : 때로는 어떤 컨테이너가을 가져 오는지를 정확히 파악하기 위해 다양한 수준의 HTML 구조를 정렬해야 할 수도 있습니다 width: 100%. IE에서 CSS 줄 바꿈 텍스트가 작동하지 않습니다

나는 같은 문제가 있었고 요점은 요소가 컨테이너에 너비를 조정하지 않았다는 것입니다.

대신에 사용하는 width:100%, 일관성 이를 추가하여 사용 플렉스 (부동 모델과 플렉스 모델을 혼합하지 마십시오)

.child { align-self: stretch; }

또는:

.parent { align-items: stretch; }

이것은 나를 위해 일했습니다.

타일러 가 여기 주석 중 하나에서 제안한 것처럼

max-width: 100%;

아이가 일할 수도 있습니다 (나를 위해 일했습니다). 사용 align-self: stretch하지 않는 경우에만 작동합니다 align-items: center(내가 한 것). width: 100%flexbox 내부에 나란히 표시하려는 여러 자녀가없는 경우에만 작동합니다.

나를 위해 나는 조부모 요소에 100 % 너비를 적용해야했습니다. 자식 요소가 아닙니다.

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

어떻게 든이 솔루션이 모두 효과가 없었습니다. 에 IE 버그가 분명히 있습니다 flex-direction:column.

나는 제거한 후에 만 ​​작동합니다 flex-direction.

flex-wrap: wrap;
align-items: center;
align-content: center;

제안 된 솔루션은 더 복잡한 마크 업이 있었기 때문에 ".child {width : 100 %;}"에 도움이되지 않았습니다. 그러나 해결책을 찾았습니다. "align-items : center;"를 제거하면이 경우에도 작동합니다.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

100 % 일관되게이 플렉스 방향 열 버그를 피할 수있는 유일한 방법은 최소 너비 미디어 쿼리를 사용하여 데스크톱 크기의 화면에서 하위 요소에 최대 너비를 할당하는 것입니다.

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

수정 프로그램이 작동하려면 자연스럽게 인라인 하위 요소 (예 : <span>또는 <a>)를 인라인 (주로 display : block 또는 display : inline-block) 이외의 다른 요소로 설정해야합니다 .

나는 내 해결책을 찾지 못했습니다. 어쩌면 누군가 유용 할 것입니다.

.child-with-overflowed-text{
  word-wrap: break-all;
}

행운을 빕니다!

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

이것은 나를 위해 일했습니다.

나도이 문제가 발생했습니다.

유일한 대안은 자식 요소에서 너비 (또는 최대 너비)를 정의하는 것입니다. IE 11은 약간 어리 석습니다. 저는이 솔루션을 깨닫기 위해 20 분을 보냈습니다.

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

플렉스 래퍼에서 오버플로 이미지와 비슷한 문제가 발생했습니다.

넘치 flex-basis: 100%;거나 flex: 1;고정 된 자식에 추가하거나 나를 위해 일했습니다.

간단한 솔루션도 작동하는 경우 왜 복잡한 솔루션을 사용합니까?

.child {
  white-space: normal;
}