防止弹性物品溢出容器

75

如何制作我的flex项（article在本示例中），而它flex-grow: 1; 不会溢出它的flex父项/容器（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>
展开摘要

css  flexbox 
— 飞乐
source
25
我有一个与子表响应有关的灵活项目非常相似的问题，解决方案是添加min-width: 0;到灵活项目。
— 华盛顿瓜迪斯
7
我可以亲吻你@WashingtonGuedes，您对min-width的提及使我进入了这篇CSS Tricks文章，其中描述了min / width如何/为什么解决了问题css-tricks.com/flexbox-truncated-text
— Josh Dean

Answers:

74

您的弹性商品有

flex: 0 0 200px; /* <aside> */
flex: 1 0 auto;  /* <article> */

这意味着：

  • 该<aside>会在启动200px宽。

    然后它不会增长也不收缩。

  • 该<article>会在由内容给出的宽度开始。

    然后，如果有可用空间，它将逐渐覆盖它。

    否则它不会缩小。

为防止水平溢出，您可以：

  • 使用flex-basis: 0，然后让它们积极成长flex-grow。
  • flex-shrink如果没有足够的空间，请使用正极使其收缩。

为了防止垂直溢出，您可以

  • 如果需要，使用min-height而不是height让flex项目增长更多
  • 使用overflow与弹性项目上可见的项目不同的项目
  • 使用overflow与Flex容器上可见的容器不同的容器

例如，

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>
展开摘要

— i
source
3
这似乎不是要去工作，如果我有<table>内部的<article>，即使换表div和overflow: auto;
— VEE
1
如果您要处理很多flex项溢出容器（而不是文本），则应使用flex-wrap
— Jorjon '17
1
@vee当您有一个<table>来处理该解决方案时，是将min-width：0添加到包含该表的flex子级中，如上面由Washington Guedes所述。
— Istopopoki
2
在多个网站上进行测试后，它不起作用，也永远不起作用。您的解决方案完全错误，应将其删除。
— Federico Schiocchet
1
@vee尝试设置flex: 1 1 0; min-width: 0;上<article>-与有同样的问题<table>，它帮助; 参见dev.to/martyhimmel/…–
— 马特
8

一种简单的解决方案是使用 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>
展开摘要

— 潘代奥洛
source
Downvote：麻烦解释吗？运行快照程序会显示OP期望的UI？
— Pandaiolo
这是正确的解决方案，以防您溢出内容，例如带有的图像或文本white-space: nowrap。谢谢
— Tigran
6

而不是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>
展开摘要

— 内纳德·弗拉卡（Nenad Vracar）
source
9
要澄清，flex: 1就像flex: 1 1 0。
— Oriol
太好了，谢谢！我想我当时的思维方式是错误的，flex-shrink因为我想我确实希望它缩小。此外@Oriol我觉得flex: 1是flex: 1 1 auto。
— philfreo '16
@philfreo不，是flex: 1 1 0。Src：w3.org/TR/css-flexbox-1/#flex-property
— Ason
嗯，为什么developer.mozilla.org/zh-CN/docs/Web/CSS/flex显示auto为第三参数的初始值？
— philfreo
Chrome 68使用时显示0％作为默认的柔韧性基础值flex: 1
— Apolo
6

我知道这真的很晚，但是对我来说，发现flex-basis: 0;对元素进行应用可以防止它溢出。

— 法鲁克查卡斯
source
1

它并不适合所有情况，因为并非所有物品都可以具有非比例的最大值，但是max-width在有问题的元素/容器上拍上好字样可以使其重新排列。

— 沃尔夫
source
0

max-width 为我工作。

aside {
  flex: 0 1 200px;
  max-width: 200px;
}

CSS预处理器的变量可以避免硬编码。

aside {
  $WIDTH: 200px;
  flex: 0 1 $WIDTH;
  max-width: $WIDTH;
}

overflow: hidden 也可以使用，但是最近我不尝试使用它，因为它会将元素隐藏为弹出窗口和下拉菜单。

— 竹井德川YD
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.