html - 프로토콜 - 플렉스 아이템이 컨텐츠 크기를 넘어서 축소되지 않는 이유는 무엇입니까?



오픈그래프 프로토콜 (1)

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

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

video (처음에는 첫 번째 열이 가장 작지만 창 크기를 조정할 때 가장 큰 열입니다. 나는 항상 플렉스 설정을 존중하고 싶습니다. 플렉스 크기 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에 정의 된 min-height min-widthmin-height 속성의 초기 값으로 새로운 auto 값을 도입합니다.

auto 가치와 관련하여 ...

플렉스 아이템의 기본 축 min-size 속성에 지정된 경우 기본 축에 overflowvisible 되는 플렉스 항목에서 자동 최소 크기를 지정합니다. 그렇지 않으면 0 계산됩니다.

다시 말해:

  • min-width: automin-height: auto 기본값은 overflowvisible 경우에만 적용됩니다.
  • overflow 값이 visible 되지 않으면 min-size 속성 값은 0 입니다.
  • 따라서 overflow: hiddenmin-width: 0min-height: 0 대신 사용할 수 있습니다.

과...

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

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

중첩 된 플렉스 컨테이너

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

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

예 :

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

브라우저 렌더링 노트

  • Chrome과 Firefox / Edge

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

  • IE11

    사양에서 언급했듯이 min-widthmin-height 속성의 auto 값은 "신규"입니다. 이는 일부 브라우저는 값이 업데이트되기 전에 플렉스 레이아웃을 구현하고 0 CSS 2.1 에서 min-height min-widthmin-height 의 초기 값이므로 기본적으로 여전히 0 값을 렌더링 할 수 있음을 의미합니다. 그러한 브라우저 중 하나는 IE11입니다. 다른 브라우저는 flexbox 사양에 정의 된대로 최신 auto 값으로 업데이트되었습니다.

수정 된 데모

.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





flexbox