Flex 항목이 콘텐츠 크기를 초과하여 축소되지 않는 이유는 무엇입니까?
4 개의 flexbox 열이 있고 모든 것이 잘 작동하지만 열에 텍스트를 추가하고 큰 글꼴 크기로 설정하면 flex 속성으로 인해 열이 더 넓어집니다.
나는 사용하려고 노력했지만 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: automin-height: auto
... 행 방향 및 열 방향의 플렉스 항목 각각.
flex 항목을 다음과 같이 설정하여 이러한 기본값을 재정의 할 수 있습니다.
min-width: 0min-height: 0overflow: hidden(또는을 제외한 기타 값visible)
Flexbox 사양
플렉스 항목에 대해보다 합리적인 기본 최소 크기를 제공하기 위해이 사양에서는 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>나는 이것이 플렉스와 그리드 모두에서 수년에 걸쳐 반복적으로 나를 물었다는 것을 알고 있으므로 다음을 제안 할 것입니다.
* { min-width: 0; min-height: 0; }
그런 다음 min-width: auto또는 min-height: auto해당 동작이 필요한 경우 사용하십시오 .
사실, 모든 레이아웃을 더 건전하게 만들기 위해 상자 크기도 고려하십시오.
* { box-sizing: border-box; min-width: 0; min-height: 0; }
이상한 결과가 있는지 아는 사람이 있습니까? 나는 위의 조합을 사용하여 몇 년 동안 아무것도 발견하지 못했습니다. 사실, 콘텐츠 안쪽으로 플렉스 / 그리드가 아닌 콘텐츠에서 바깥쪽으로 플렉스 / 그리드로 레이아웃하고 싶은 경우를 생각할 수 없으며 확실히 존재하는 경우 드뭅니다. 그래서 이것은 나쁜 기본값처럼 느껴집니다. 하지만 내가 뭔가를 놓친 것일까 요?