플렉스 항목이 컨테이너를 초과하지 않도록 방지
Flex 항목을 만드는 방법(article
이 예에서는)를 사용합니다.flex-grow: 1;
유연한 상위/하위 항목이 오버플로되지 않도록(main
)?
이 예에서는article
다른 요소를 포함할 수 있지만 텍스트일 뿐입니다(table
s 등).
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
}
main {
display: flex;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1 0 auto;
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
나를 위해 단순히 추가하는 것.min-width: 0;
오버플로를 방지하는 오버플로 디브:
article {
min-width: 0;
}
설명:
min-width
유연한 맥락에서:기본값인 동안min-width
값은0
(0), 플렉스 항목의 경우auto
이로 인해 블록 요소가 원하는 공간보다 훨씬 많은 공간을 차지하여 오버플로가 발생할 수 있습니다.
min-width
경쟁사에 대항하여 승리하도록 정의됨width
그리고.max-width
즉, 요소의 너비가 암시적 자동 너비 아래로 줄어드는 즉시,min-width:auto
활성화되어 요소가 축소되지 않습니다.
이제 해결책은 분명합니다.min-width: 0
브라우저에 이 요소는 최소 너비를 차지할 권한이 없으며 사용 가능한 너비만 차지하여 올바르게 렌더링됩니다.
에 대한 메모flex-shrink
플렉스 수축은 여기서 도움이 될 수 있는 것처럼 들리지만, 그렇지 않습니다.설명된 문제는 요소의 함량에 따른 요소 크기 조정에 관한 것이고, 플렉스 수축은 동일한 맥락에서 다른 플렉스 요소에 대한 상대적인 수축을 정의하는 것입니다.출처
당신의 플렉스 아이템은
flex: 0 0 200px; /* <aside> */
flex: 1 0 auto; /* <article> */
즉, 다음과 같습니다.
그
<aside>
에서 시작할 예정200px
넓은.그러면 자라지도 줄어들지도 않습니다.
그
<article>
내용에 의해 지정된 너비에서 시작합니다.그리고 나서, 이용 가능한 공간이 있다면, 그것은 그것을 덮을 수 있도록 자랄 것입니다.
그렇지 않으면 줄어들지 않습니다.
수평 오버플로를 방지하기 위해 다음을 수행할 수 있습니다.
- 사용하다
flex-basis: 0
그리고 나서 그들이 긍정적으로 성장하도록 놔둡니다.flex-grow
. - 양수 사용
flex-shrink
공간이 충분하지 않으면 축소할 수 있습니다.
수직 오버플로를 방지하려면 다음을 수행합니다.
- 사용하다
min-height
대신에height
필요한 경우 유연성 항목을 더 늘릴 수 있습니다. - 사용하다
overflow
플렉스 항목에서 볼 수 있는 것과 다른 - 사용하다
overflow
플렉스 용기에서 볼 수 있는 것과 다릅니다.
예를들면,
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
min-height: 50px; /* min-height instead of height */
}
main {
display: flex;
}
aside {
flex: 0 1 200px; /* Positive flex-shrink */
}
article {
flex: 1 1 auto; /* Positive flex-shrink */
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
한 가지 쉬운 해결책은overflow
이외의 값visible
텍스트 플렉스 기준 너비를 예상대로 재설정합니다.
가치가 있는 여기
auto
텍스트가 예상대로 래핑되고 아티클 내용이 주 컨테이너를 오버플로하지 않습니다.또한, 그 기사는
flex
값은 다음 값을 가져야 합니다.auto
기본적으로 축소할 수 있거나 확장만 가능하며 명시적일 수 있습니다.0
근거
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
overflow: auto; /* 1. overflow not `visible` */
}
main {
display: flex;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1 1 auto; /* 2. Allow auto width content to shrink */
/* flex: 1 0 0; /* Or, explicit 0 width basis that grows */
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
이게 정말 늦었다는 건 알지만, 저는 신청을 했습니다.flex-basis: 0;
요소가 오버플로되는 것을 방지했습니다.
합니다.flex-flow: row wrap
에 에.flex: 1 0 auto
냥쓰기를 합니다.flex: 1
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
}
main {
display: flex;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1;
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
하지 않는 최대치를 , ol'을 때리는 것은 모든 상황에 적합하지 않습니다. 왜냐하면 모든 항목이 비례하지 않는 최대치를 가질 수는 없지만, 좋은 ol을 찰싹찰싹 때릴 수 있기 때문입니다.max-width
문제가 되는 요소/요소를 다시 정렬할 수 있습니다.
max-width
저한테는 효과가 있어요.
aside {
flex: 0 1 200px;
max-width: 200px;
}
CSS 사전 프로세서의 변수는 하드 코딩을 피할 수 있게 합니다.
aside {
$WIDTH: 200px;
flex: 0 1 $WIDTH;
max-width: $WIDTH;
}
overflow: hidden
또한 작동하지만 최근에는 요소를 팝업 및 드롭다운으로 숨기기 때문에 사용하지 않으려고 합니다.
article { width: 0; }
작동하기도 합니다.
나는 여기서 파티에 늦었지만 여기서 어떻게 하는지 알아요.플렉스 속성을 가진 "부모"는 기본적으로 하위 항목이 수평으로 흐를 내용의 흐름을 결정합니다.수직으로 흐르도록 지정한 다음 거기서 이동해야 합니다.도움이 되길 바랍니다.
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
}
main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1 0 auto;
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
언급URL : https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container
'programing' 카테고리의 다른 글
ipython 노트북에서 matplotlib 수치 기본 크기를 설정하는 방법은 무엇입니까? (0) | 2023.08.05 |
---|---|
ApplicationContext 자체를 주입하는 방법 (0) | 2023.08.05 |
목록 보기용 사용자 지정 어댑터 (0) | 2023.08.05 |
Django 템플릿의 계수 % (0) | 2023.08.05 |
스위프트에서 문자열을 부동으로 변환 (0) | 2023.08.05 |