플렉스 항목이 컨테이너를 초과하지 않도록 방지

플렉스 항목이 컨테이너를 초과하지 않도록 방지

Flex 항목을 만드는 방법(article이 예에서는)를 사용합니다.flex-grow: 1; 유연한 상위/하위 항목이 오버플로되지 않도록(main)?

이 예에서는article다른 요소를 포함할 수 있지만 텍스트일 뿐입니다(tables 등).

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텍스트 플렉스 기준 너비를 예상대로 재설정합니다.

1. 가치가 있는 여기auto텍스트가 예상대로 래핑되고 아티클 내용이 주 컨테이너를 오버플로하지 않습니다.

2. 또한, 그 기사는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