플렉스 아이템이 컨텐츠 크기를 넘어 축소되지 않는 이유는 무엇입니까?

4 개의 flexbox 열이 있고 모든 것이 잘 작동하지만 텍스트를 열에 추가하고 큰 글꼴 크기로 설정하면 flex 속성으로 인해 열이 더 넓어집니다.

사용하려고 시도했지만 word-break: break-word도움이되었지만 열의 크기를 매우 작은 너비로 조정하면 텍스트의 문자가 여러 줄로 나뉘어 있지만 (한 줄에 하나의 문자) 열이 한 글자 크기보다 작지 않습니다. .

이 비디오를보십시오 (처음에는 첫 번째 열이 가장 작지만 창 크기를 조정할 때 가장 큰 열입니다. 나는 항상 플렉스 설정을 존중하고 싶습니다. 플렉스 크기 1 : 3 : 4 : 4)

글꼴 크기와 열 패딩을 더 작게 설정하면 도움이되지만 다른 해결책이 있습니까?

사용할 수 없습니다 overflow-x: hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

플렉스 아이템의 자동 최소 크기

flexbox 기본 설정이 발생했습니다.

플렉스 항목은 기본 축을 따라 내용의 크기보다 작을 수 없습니다.

기본값은 ...

• min-width: auto
• min-height: auto

... 행 방향 및 열 방향의 플렉스 항목에 각각 적용됩니다.

flex 항목을 다음과 같이 설정하여 이러한 기본값을 무시할 수 있습니다.

• min-width: 0
• min-height: 0
• overflow: hidden(또는를 제외한 다른 값 visible)

Flexbox 사양

4.5. 플렉스 아이템의 자동 최소 크기

플렉스 항목에보다 합리적인 기본 최소 크기를 제공하기 위해이 사양에서는 CSS 2.1에 정의 된 및 속성 auto의 초기 값으로 새로운 값을 소개합니다 .min-widthmin-height

auto가치 와 관련하여 ...

그가요 항목 overflow이다 visible플렉스 항목의 메인 축 최소 크기 속성에 지정된 경우 주축에, 지정 자동 최소 크기 . 그렇지 않으면로 계산합니다 0.

다시 말해:

• min-width: auto및 min-height: auto시 기본값에만 적용 overflow입니다 visible.
• overflow값이 아닌 경우 visiblemin-size 속성의 값은입니다 0.
• 따라서 overflow: hidden를 대체 할 수있다 min-width: 0및 min-height: 0.

과...

• 최소 크기 알고리즘은 기본 축에만 적용됩니다.
• 예를 들어, 행 방향 컨테이너의 플렉스 항목은 min-height: auto기본적으로 제공 되지 않습니다 .
• 자세한 설명은이 게시물을 참조하십시오.
  • 플렉스 방향 : 행 및 플렉스 방향 : 열에서 다르게 최소 너비 렌더링

최소 너비 : 0을 적용 했는데도 항목이 축소되지 않습니까?

중첩 된 플렉스 컨테이너

당신이 HTML 구조의 여러 수준에 플렉스 항목을 처리하는 경우, 기본값을 대체 할 필요가있다 min-width: auto/ min-height: auto높은 수준에서 항목을.

기본적으로 더 높은 수준의 플렉스 항목은으로 min-width: auto아래에 중첩 된 항목의 축소를 방지 할 수 있습니다 min-width: 0.

예 :

• Flex 항목이 내용보다 작게 줄어들지 않습니다
• 자녀를 부모에게 맞추기
• 공백 CSS 속성으로 인해 플렉스 문제가 발생합니다

브라우저 렌더링 노트

• Chrome과 Firefox / Edge

  2017 년부터 Chrome은 (1) min-width: 0/ min-height: 0기본값으로 되돌 리거나 (2) 0미스터리 알고리즘을 기반으로 특정 상황 에서 기본값을 자동으로 적용하는 것으로 보입니다 . (이것은 그들이 개입 이라고 부를 수 있습니다 .) 그 결과 많은 사람들이 레이아웃 (특히 원하는 스크롤바)이 Chrome에서 예상대로 작동하지만 Firefox / Edge에서는 작동하지 않는 것을보고 있습니다. 이 문제는 Firefox와 Chrome의 flex-shrink 불일치에 대해 자세히 설명합니다.

• IE11

  사양에 명시된 바와 같이 and 속성 의 auto값 은 "new"입니다. 일부 브라우저는 여전히 렌더링 수 있음이 수단 값이 업데이트되기 전에 그들이 플렉스 레이아웃을 구현하기 때문에 때문에, 기본적으로 값을 초기 값 과 의 CSS 2.1 . 그러한 브라우저 중 하나는 IE11입니다. 다른 브라우저는 flexbox spec에 정의 된 새로운 값으로 업데이트되었습니다 .min-widthmin-height00min-widthmin-heightauto

수정 된 데모

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle