Flex 항목이 콘텐츠 크기를 초과하여 축소되지 않는 이유는 무엇입니까?

Mar 27 2016

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>

답변

619 MichaelBenjamin Mar 27 2016 at 19:41

Flex 항목의 자동 최소 크기

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

플렉스 항목은 기본 축을 따라 해당 콘텐츠의 크기보다 작을 수 없습니다.

기본값은 ...

min-width: auto
min-height: auto

... 행 방향 및 열 방향의 플렉스 항목 각각.

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

min-width: 0
min-height: 0
overflow: hidden(또는을 제외한 기타 값 visible)

Flexbox 사양

4.5. Flex 항목의 자동 최소 크기

플렉스 항목에 대해보다 합리적인 기본 최소 크기를 제공하기 위해이 사양에서는 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: 0min-height: 0

과...

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

min-width : 0을 적용했는데 항목이 여전히 축소되지 않습니까?

중첩 된 플렉스 컨테이너

HTML 구조의 여러 수준에서 플렉스 항목을 처리하는 경우 더 높은 수준에서 기본 min-width: auto/ min-height: auto항목 을 재정의해야 할 수 있습니다 .

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

예 :

브라우저 렌더링 노트

Chrome vs. Firefox / Edge

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

사양에 명시된대로 및 속성 의 auto값 은 "new"입니다. 일부 브라우저는 여전히 렌더링 수 있음이 수단 값이 업데이트되기 전에 그들이 플렉스 레이아웃을 구현하기 때문에 때문에, 기본적으로 값을 초기 값 과 의 CSS 2.1 . 그러한 브라우저 중 하나가 IE11입니다. 다른 브라우저는 flexbox 사양에 정의 된 최신 값으로 업데이트되었습니다 .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

2 voracity Aug 24 2020 at 15:40

나는 이것이 플렉스와 그리드 모두에서 수년에 걸쳐 반복적으로 나를 물었다는 것을 알고 있으므로 다음을 제안 할 것입니다.

* { min-width: 0; min-height: 0; }

그런 다음 min-width: auto또는 min-height: auto해당 동작이 필요한 경우 사용하십시오 .

사실, 모든 레이아웃을 더 건전하게 만들기 위해 상자 크기도 고려하십시오.

* { box-sizing: border-box; min-width: 0; min-height: 0; }

이상한 결과가 있는지 아는 사람이 있습니까? 나는 위의 조합을 사용하여 몇 년 동안 아무것도 발견하지 못했습니다. 사실, 콘텐츠 안쪽으로 플렉스 / 그리드가 아닌 콘텐츠에서 바깥쪽으로 플렉스 / 그리드로 레이아웃하고 싶은 경우를 생각할 수 없으며 확실히 존재하는 경우 드뭅니다. 그래서 이것은 나쁜 기본값처럼 느껴집니다. 하지만 내가 뭔가를 놓친 것일까 요?