Flex 항목을 콘텐츠 크기보다 작게 줄일 수 없는 이유는 무엇입니까?

Question

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

word-break: break-word를 사용해 보았더니 도움이 되었지만 열의 크기를 아주 작은 너비로 조정하면 텍스트의 문자가 여러 줄로 나누어졌습니다(한 줄). 행당 문자), 단, 열 너비는 문자 크기보다 작지 않습니다.

이 동영상 보기(처음에는 첫 번째 열이 가장 작지만 창 크기를 조정하면 가장 넓은 열이 됩니다. 항상 플렉스 설정을 존중하고 싶습니다. 플렉스 크기는 1:3입니다. 4:4)

글꼴 크기와 열 패딩을 더 작은 값으로 설정하는 것이 도움이 될 것이라는 것을 알고 있습니다... 그런데 다른 해결 방법이 있나요?

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

JSFiddle

.container {
  디스플레이: 플렉스;
  너비: 100%
}
.col {
  최소 높이: 200px;
  패딩: 30px;
  word-break: 단어를 깨다
}
.col1 {
  플렉스: 1;
  배경: 주황색;
  글꼴 크기: 80px
}
.col2 {
  플렉스: 3;
  배경: 노란색
}
.col3 {
  플렉스: 4;
  배경 : 하늘색
}
.col4 {
  플렉스: 4;
  배경: 빨간색
}

  
로렘 입숨 돌러
  
로렘 입숨 돌러
  
로렘 입숨 돌러
  
로렘 입숨 돌러

Answer 1

이로 인해 지난 몇 년 동안 플렉스와 그리드 모두에 여러 번 문제가 발생했다는 것을 알았으므로 다음을 제안합니다.

으아아아

이 동작이 필요한 경우 min-width: auto或min-height: auto를 사용하세요.

실제로 상자 크기를 추가하여 모든 레이아웃을 더욱 합리적으로 만들 수도 있습니다.

으아아아

이상한 결과가 나타나는지 아는 사람 있나요? 위의 방법을 몇년 동안 사용해 왔는데 아무런 문제가 없었습니다. 사실, flex/grid에서 안쪽으로 콘텐츠를 배치하는 것이 아니라 콘텐츠에서 바깥쪽으로 flex/grid로 레이아웃하려는 상황은 전혀 생각할 수 없습니다. 그리고 그러한 상황이 존재하는 경우는 확실히 드뭅니다. 그래서 이것은 나쁜 기본값처럼 느껴집니다. 하지만 제가 뭔가를 놓치고 있는 게 아닐까요?

Answer 2

Flex 프로젝트의 자동 최소 크기

Flexbox의 기본 설정이 나타납니다.

Flex 항목은 주축의 콘텐츠 크기보다 작을 수 없습니다.

기본 설정은...

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

...행 및 열 방향으로 각각 플렉스 항목에 적용 가능합니다.

플렉스 항목을 다음과 같이 설정할 수 있습니다.

• min-width: 0
• min-height: 0
• overflow: hidden（或任何其他值，除了visible)

---

Flexbox 사양

auto값 정보...

즉,

• min-width: auto和min-height: auto默认仅在overflow为visible 및
는 overflow가 visible인 경우에만 기본적으로 적용 가능합니다.
• overflow的值不是visible，则min-size属性的值为0만약
.
• overflow: hidden可以替代min-width: 0和min-height: 0따라서 overflow:hidden은
및

을 대체할 수 있습니다.

그리고...
• 최소 크기 알고리즘은 스핀들에서만 작동합니다. min-height: auto
예를 들어 행 기반 컨테이너의 플렉스 항목은 기본적으로
• 를 얻지 못합니다.
  • 자세한 설명은 다음 게시물을 참조하세요.
  최소 너비는 플렉스 방향: 행과 플렉스 방향: 열에서 다르게 렌더링됩니다

---

min-width: 0을 적용했지만 프로젝트가 여전히 축소되지 않나요?

중첩된 Flex 컨테이너

min-width: auto / min-height: auto

HTML 구조의 여러 수준에서 가변 항목을 사용하여 작업하는 경우 상위 수준 항목의 기본값

/min-width: auto的较高级别flex项目可以阻止下方嵌套的具有min-width: 0을 재정의할 수 있습니다.

기본적으로

가 포함된 상위 레벨 플렉스 항목은

가 포함된 아래 중첩 항목이 축소되는 것을 방지합니다.
• 예:
• Flex 항목은 내용보다 작게 축소될 수 없습니다
• 하위 요소를 상위 요소에 적용

---

white-space CSS 속성이 플렉스 레이아웃과 충돌합니다

• 브라우저 렌더링 고려 사항

  min-width: 0 / min-height: 0的默认值，要么（2）根据某个神秘的算法在某些情况下自动应用0Chrome과 Firefox/Edge 2017년부터 Chrome은 (1) 기본값인 /로 되돌리거나 (2) 신비한 알고리즘을 기반으로 특정 상황에서 기본값 0을 자동으로 적용하는 것으로 보입니다. (이것이 아마도

  intervention🎜🎜이라고 불리는 것일 것입니다.) 결과적으로 많은 사람들이 레이아웃(특히 원하는 스크롤 막대)이 Chrome에서는 예상대로 작동하지만 Firefox/Edge에서는 작동하지 않는 것을 봅니다. 자세한 내용은 여기를 참조하세요: 🎜Firefox와 Chrome의 flex-shrink 차이점🎜🎜

• IE11

  사양에 명시된 대로 min-width和min-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。IE11是其中之一。其他浏览器已经更新到了在flexbox规范中定义的较新的auto값입니다.

---

수정된 데모

으아아아 으아아아