容器高度未扩展以适应导致溢出的内容

Question

我尝试使用flexboxes但是遇到了麻烦。

这应该是它的样子：

一旦显示太小，内容就会溢出嵌套的flexbox或（当我试图自己修复它时）嵌套的flexbox会溢出主Flexbox。

错误：

＆＃13;

＆＃13;

html,
body,
.viewport {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}

body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

header,
article,
section,
footer {
  padding: 2em;
}

header {
  background-color: red;
}

article {
  background-color: aqua;
  -webkit-flex: 1;
  flex: 1;
}

section {
  background-color: yellow;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.offer {
  background-color: cornflowerblue;
  border: 1px solid black;
}

footer {
  background-color: forestgreen;
}

＆＃13;

<header>
  Header
</header>
<article>
  Article
</article>
<section>
  <div class="offer">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentes</div>
  <div class="offer">O2</div>
  <div class="offer">O3</div>
</section>
<footer>
  Footer
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您希望容器随内容展开，请不要使用固定的高度。

改为使用min-height。

jsFiddle demo

＆＃13;

＆＃13;

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* allows container to expand with growing content */
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
body > * {
  padding: 2em;
}
header {
  background-color: red;
}
article {
  flex: 1;
  background-color: aqua;
}
section {
  display: flex;
  flex: 1;
  background-color: yellow;
}
.offer {
  background-color: cornflowerblue;
  border: 1px solid black;
}
footer {
  background-color: forestgreen;
}

＆＃13;

<header>Header</header>
<article>Article</article>
<section>
  <div class="offer">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentes</div>
  <div class="offer">O2</div>
  <div class="offer">O3</div>
</section>
<footer>Footer</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不确定这是否是您要找的，但您可以添加        ＆＃34; flex-wrap：wrap; ＆＃34; 到.section（黄色背景）。这将导致盒子在没有足够空间时垂直堆叠，并将所有内容保留在正确的边框内。包装的默认设置是不包装，这就是为什么你的内容像这样拼凑在一起。