Flexbox 컨테이너 내에서 사용할 때 `overflow-wrap: break-word`가 예상대로 작동하지 않는 이유는 무엇입니까?

Flexbox가 Overflow-Wrap 동작에 영향을 미침

질문:

다음 코드에서 Overflow-wrap 속성을 사용하는 이유는 무엇입니까? display: flex와 결합하면 예상대로 동작하지 않습니까?

.wrap {
  overflow-wrap: break-word;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

답변:

display: flex를 랩 요소에 추가하면 flexbox 컨테이너가 됩니다. . 기본적으로 Flexbox 컨테이너 내부의 요소는 한 줄로 정렬됩니다. 그러나 Flexbox 하위 요소의 min-width 속성은 기본적으로 auto로 설정되어 있어 콘텐츠를 유지하는 데 필요한 최소 너비를 차지하게 됩니다.

제공된 코드에서 이는 요소 a와 b가 내용을 수용할 수 있도록 확장되었습니다. 요소 b에는 매우 긴 텍스트 내용이 있으므로 가로 스크롤 막대가 강제로 표시됩니다.

이 문제를 해결하려면 요소 b의 최소 너비를 0으로 설정하면 됩니다. 이렇게 하면 요소 b가 크기에 맞게 축소됩니다. 콘텐츠를 삭제하고 가로 스크롤 막대를 제거하세요.

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

위 내용은 Flexbox 컨테이너 내에서 사용할 때 `overflow-wrap: break-word`가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!