다음 스 니펫을 고려하십시오.
.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작동합니다.
참고 : 때로는 어떤 컨테이너가을 가져 오는지를 정확히 파악하기 위해 다양한 수준의 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) 이외의 다른 요소로 설정해야합니다 .