Flex 항목이 콘텐츠 크기 이상으로 줄어들지 않는 이유는 무엇입니까?

Question

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

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

동영상 보기 (처음에는 첫 번째 열이 가장 작지만 창 크기를 조정하면 가장 넓은 열이 됩니다. 항상 Flex 설정을 존중하고 싶습니다. Flex 크기는 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

Flex와 그리드가 수년 동안 저를 괴롭혀 왔다는 것을 알게 되었기 때문에 제가 제안하는 것은 다음과 같습니다.

으아악

그런 다음 이 동작이 필요하면 min-width: auto 或 min-height: auto를 사용하세요.

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

으아악

이상한 결과가 나타나는지 아는 사람 있나요? 위의 방법을 혼합해서 사용해도 몇 년 동안 아무런 문제가 없었습니다. 사실 Flex/Grid에서 콘텐츠 안쪽으로 레이아웃하는 대신 콘텐츠에서 바깥쪽으로 Flex/Grid로 레이아웃하려는 경우는 전혀 생각할 수 없습니다. 물론 존재한다면 그런 경우는 드뭅니다. . 그래서 이것은 나쁜 기본값처럼 느껴집니다. 하지만 제가 뭔가를 놓치고 있는 게 아닐까요?

Answer 2

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

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

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

기본값은...

• 最小宽度：自动
• 最小高度：自动

...행 및 열 방향 각각에 대한 유연한 항목입니다.

Flex 항목을 다음으로 설정하여 이러한 기본값을 무시할 수 있습니다.

• 最小宽度：0
• 最小高度：0
• 溢出：隐藏（或任何其他值，可见제외)

---

Flexbox 사양

auto값 정보...

즉,

• min-width: auto 和 min-height: auto 默认值仅在overflow 可见.
일 때 적용됩니다.
• 만약overflow值不可见，则min-size属性的值为0.
• 그러므로 overflow: hide 可以替代 min-width: 0 和 min-height: 0.

역시...

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

---

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

중첩된 Flex 컨테이너

HTML 구조의 여러 수준에서 Flex 프로젝트로 작업하는 경우 상위 수준 프로젝트에서 기본값 min-width: auto / min-height: auto code>를 재정의할 수 있습니다.

기본적으로 min-width: auto 的更高级别的 Flex 项目可以防止使用 min-width: 0를 사용하는 더 높은 수준의 Flex 프로젝트는

min-width: 0을 사용하여 아래에 중첩된 프로젝트가 축소되는 것을 방지합니다.

예:

• Flex 항목은 내용물보다 작게 줄어들지 않습니다
• 아이를 부모에게 맞추세요
• 빈 CSS 속성은 Flex

에 문제를 일으킬 수 있습니다.

---

브라우저 렌더링 지침

• Chrome과 Firefox/Edge

  🎜

  적어도 2017년부터 Chrome은 (1) min-width: 0 / min-height: 0 默认值，或者 ( 2) 基于神秘算法在某些情况下自动应用 0기본값으로 되돌아가는 것 같습니다. (이것이 아마도 intervention이라고 불리는 것일 것입니다.) 결과적으로 많은 사람들이 레이아웃(특히 필수 스크롤 막대)이 Chrome에서는 예상대로 작동하지만 Firefox/Edge에서는 작동하지 않는 것을 보고 있습니다. 이 문제는 여기에서 더 자세히 다룹니다. Firefox와 Chrome의 flex-shrink 차이점

• IE11

  사양에 명시된 대로 min-width 및 min-height 속성의 auto 값은 "new"입니다. 이는 일부 브라우저가 값을 업데이트하기 전에 Flex 레이아웃을 구현하고 0이 최소 초기 값 ​​0 값을 계속 렌더링할 수 있음을 의미합니다. href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths" rel=" -width 및 min-heightnoreferrer"> CSS 2.1min-width 和 min-height 属性的 auto 值为“新”。这意味着某些浏览器默认情况下仍可能呈现 0 值，因为它们在更新该值之前实现了 Flex 布局，并且 0 是 min 的初始值CSS 2.1。 IE11 就是这样的浏览器。 其他浏览器已更新到较新的 flexbox 规范中定义的 auto. IE11이 바로 그런 브라우저입니다.

  다른 브라우저는 최신 flexbox auto 사양 .

에 정의된 값

---

수정된 데모

🎜 으아악 으아악