유연한 항목이 콘텐츠 크기를 넘어서 축소되지 않는 이유는 무엇입니까?

유연한 항목이 콘텐츠 크기를 넘어서 축소되지 않는 이유는 무엇입니까?

4개의 플렉스박스 열이 있고 모든 것이 정상적으로 작동하지만, 열에 텍스트를 추가하고 큰 글꼴 크기로 설정하면 플렉스 속성으로 인해 열이 필요 이상으로 넓어집니다.

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

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

알아요, 글꼴 크기와 열 채우기를 더 작게 설정하면...하지만 다른 해결책이 있을까요?

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

제이에스아이들

.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>

Flex 항목의 자동 최소 크기

Flexbox 기본 설정이 표시됩니다.

유연한 항목은 주 축을 따라 내용 크기보다 작을 수 없습니다.

기본값은...

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

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

유연 항목을 다음으로 설정하여 이러한 기본값을 재정의할 수 있습니다.

• min-width: 0
• min-height: 0
• overflow: hidden (으)를 한 다른 값visible)

---

Flexbox 사양

4.5. 플렉스 항목의 자동 최소 크기

항목에 보다 이 "flex"를 했습니다.auto 값서의가의 으로서의 값min-width그리고.min-heightCSS 2.1에 정의된 속성입니다.

에 .auto값...값...

다음의 플렉스 아이템에overflow이라visible주축에서 플렉스 항목의 주축 최소 크기 속성에 지정된 경우 자동 최소 크기를 지정합니다.그렇지 않으면 다음을 계산합니다.0.

즉, 다음과 같습니다.

• 그min-width: auto그리고.min-height: auto기본값은 다음 경우에만 적용됩니다.overflow이라visible.
• 에 약에만.overflow이 값이 아니다가 아닙니다.visible은 최소 크속 값다 같과 니습 입니다.0.
• 이런 이유로,overflow: hidden의 대용품이 될 수 있습니다.min-width: 0그리고.min-height: 0.

그리고...

• 최소 크기 조정 알고리즘은 주 축에만 적용됩니다.
• 예를 들어, 행 방향 컨테이너의 플렉스 항목은 다음 값을 얻지 못합니다.min-height: auto
• 자세한 설명은 다음 게시물을 참조하십시오.
  • 유연한 방향: 행과 유연한 방향: 열에서 최소 너비 렌더링이 서로 다릅니다.

---

최소 너비: 0을 적용했는데 아직도 아이템이 줄어들지 않나요?

중첩된 Flex 컨테이너

구조의 기본 " " " " " " " " " " " " " " " " " 을 할도 있습니다.min-width: auto/min-height: auto더 높은 수준의 항목에.

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

예:

• Flex 항목이 내용물보다 작게 축소되지 않음
• 자식을 부모에 끼워 넣기
• 화이트스페이스 CSS 속성이 플렉스와 관련된 문제를 만들고 있습니다.

---

브라우저 렌더링 노트

• 크롬 vs.파이어폭스 / 엣지

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

• IE11

  와 같이, 사에서언바같이와급된양,같이,auto에 대한 값min-width그리고.min-height속성이 "새로 만들기"입니다.이것은 일부 브라우저가 여전히 다음을 렌더링할 수 있음을 의미합니다.0값이 에 플렉스 을 구현했기 됩니다.0는 의초 값입다니의 입니다.min-width그리고.min-heightCSS 2.1에서.그러한 브라우저 중 하나가 IE11입니다.다른 브라우저가 최신 버전으로 업데이트되었습니다.autoFlexbox 사양에 정의된 값입니다.

---

수정된 데모

.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

저는 이것이 수년간 플렉스와 그리드 모두에서 반복적으로 저를 괴롭혔다는 것을 알게 되었습니다. 그래서 저는 다음을 제안하고자 합니다.

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

그런 다음 그냥 사용합니다.min-width: auto또는min-height: auto당신이 그런 행동이 필요하다면요

모든 레이아웃을 보다 제정신으로 만들기 위해 박스 크기 조정도 가능합니다.

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

이상한 결과가 있는지 아는 사람?저는 위의 내용을 혼합하여 사용한 지 몇 년 동안 어떤 것도 마주치지 않았습니다.사실, 컨텐츠를 내부 플렉스/그리드가 아닌 외부 플렉스/그리드로 레이아웃하려는 경우는 생각할 수 없습니다. 물론 존재하는 경우는 드물죠.따라서 이는 불량한 기본값처럼 느껴집니다.하지만 제가 뭔가를 놓치고 있는 건 아닐까요?

질문에 대한 순수한 대답은 기본적으로 브라우저는 판독기에 가능한 한 많은 정보를 표시하고 아무것도 숨기지 않는 경향이 있다는 것입니다.

은 기본적으로 및배경에 높이( 너비보다 큰 의 내용을 합니다.페이지 대비 및 가독성을 위해 흰색 배경에 기본 검은색 글꼴을 표시하거나, 내용이 뷰포트 높이(또는 너비)보다 큰 스크롤 막대를 추가하거나, 실수로 배치된 후에도 마크업(또는 배경색)의 내용을 표시합니다.</body>아니 심지어는</html>에 있습니다.

CSS의 맥락에서, 이것은 또한 적용되지만, 당신은 또한 많은 사용자 정의를 가지고 놀 수 있습니다.

글꼴: 화에서조거글차사예용경는우하을꼴대한면)을 사용하는 에서도.font-size: 50em;요소로 유연한 합니다).display: flex가 한이동변않작경습다니지되은을 사용하지 한 overflow: hidden요소의 크기를 조정할 수도 있습니다.

우아한 해결책은 예를 들어 문자의 동적 크기 조정을 사용하는 것입니다.

font-size: calc(0.5em + 2vw)

반응하는 시나리오에서도 잘 작동합니다.

앞서 언급한 답변처럼, 플렉스 아이템은 주축을 따라 콘텐츠의 크기보다 작을 수 없습니다(같은 이유로, 그것은 CSS에서 구현된 플렉스박스 모델에만 국한된 것이 아니라 내부 브라우저 작업 방식 때문입니다.표시 너비보다 긴 단어라도 크기가 고정된 블록 유형 요소인 것처럼 스크롤 막대가 표시됩니다.

이것은 오래된 html 4.01 사양에서 다음과 같이 언급됩니다.

"일반적으로 시각적 HTML 사용자 에이전트는 텍스트 줄을 사용 가능한 여백에 맞게 래핑합니다.래핑 알고리즘은 포맷되는 스크립트에 따라 달라집니다.

예를 들어, 서양 스크립트에서 텍스트는 공백으로만 감싸야 합니다."

여기 9.5.3항에서 보는 바와 같이.이것은 그 이후로 텍스트가 기본적으로 계속해서 표시되어야 한다는 것을 의미합니다(단, 단일 문자 수준에서 분할하기로 결정하지 않는 한: 120em 크기로 표시된 단일 비백 문자가 브라우저에 표시되는 스크롤 막대를 트리거합니다).

또한 단어는 9.1항에서 동일한 출처로 명확하게 정의되어 있습니다.

여기서 "단어"라는 용어는 "흰색이 아닌 공백 문자의 집합"을 의미합니다.

단어의 원래 형식을 표시하는 목적은 코드 작성자의 원래 정보, 의미 또는 의도를 파괴하거나 숨기거나 왜곡하지 않는 것입니다., 는또한리우도 있습니다. 두 한 줄로 - 가 될 10PM, 10km/h, 10km/h 등).

의 이 의아이코에대해, 가추를 합니다.width: 100%내 문제를 해결했습니다.

.post-cover .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    word-break: break-all;
    z-index: 21;
}
.post-cover .article-page {
    padding: 20px 0;
    margin-bottom: 40px;
    font-size: 0.875em;
    line-height: 2.0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;   /* Add this */
}

저는 아래 코드를 인덱스에 넣는 등 모든 것을 시도했습니다.

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

하지만 아무 것도 효과가 없었습니다.

마침내 나는 내가 가지고 있는 것이 만족스러운 것을 지나 움츠리고 싶은 디브를 만들었습니다.position: absolute;그리고는 줄어들기 시작했습니다.부모 div에는 정의된 높이와 너비가 필요합니다.이것이 모든 시나리오에 대한 최선의 해결책은 아닐 수 있지만, 이 방법이 효과적이라면 좋습니다!

언급URL : https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size