防止弹性物品溢出容器

时间：2016-03-26 02:25:30

标签： css flexbox

如何制作我的弹性项目（在此示例中为article），其中flex-grow: 1; 不溢出它的flex父级/容器（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>

8 个答案:

答案 0 :(得分：40)

您的弹性项目

flex: 0 0 200px;
flex: 1 0 auto;

这意味着：

  • 第一个将从200px宽开始。

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

  • 第二个将从内容给出的宽度开始。

    然后，如果有可用空间，它将增长到覆盖它。

    否则它不会收缩。

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

  • 使用flex-basis: 0然后让他们以积极的flex-grow成长。
  • 如果空间不足，请使用正flex-shrink让它们缩小。

为防止垂直溢出，您可以

  • 使用min-height代替height，以便灵活项目在必要时增加更多
  • 在弹性项目
    • 上使用与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>
public bool IsAdministrator { get; set; }

答案 1 :(得分：32)

对我来说，只需将 min-width: 0; 添加到溢出的 div 即可防止溢出：

article {
  min-width: 0;
}

说明：

min-width 在 flex 上下文中：虽然默认的 min-width 值为 0（零），但对于 flex 项目，它是 auto。这会使块元素占用比预期更多的空间，从而导致溢出。

min-width 被定义为战胜竞争对手 width 和 max-width，这意味着一旦元素的宽度缩小到其隐式自动宽度以下，min-width:auto 将开始并保持元素不收缩。

现在修复很明显：min-width: 0

它告诉浏览器这个元素没有权利占用任何最小宽度，现在它会被正确渲染，只占用可用的宽度。

关于 flex-shrink 的说明：虽然 flex-shrink 听起来在这里有帮助，但它没有。所描述的问题是关于基于元素内容的元素大小，而 flex-shrink 定义相对于同一上下文中其他 flex 元素的收缩。 Source

答案 2 :(得分：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>

答案 3 :(得分：2)

一个简单的解决方案是使用overflow以外的visible值来使文本弹性基础宽度按预期重置。

  1. 此处使用值auto，文本按预期包装，文章内容不会溢出主容器。

  2. 此外，文章flex值必须具有auto基础且能够缩小，或者仅增长并显式0基础

    3. ＆＃13;
    ＆＃13; 
    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 */
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 4 :(得分：2)

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

答案 5 :(得分：1)

这并不适合所有情况，因为并非所有物品都可以具有非比例的最大值，但是在有问题的元素/容器上拍好ol'max-width可以使其恢复一致。

答案 6 :(得分：0)

如果您想溢出来包装：flex-flow: row wrap

答案 7 :(得分：0)

max-width对我有用。

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

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

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

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

相关问题
最新问题