如何让flex子项随着它的增长而溢出它的父级？

Question

我有一个带有一个flex子项的flexbox：

<div class="flex-parent">
  <div class="flex-child">
    lots of content...
  </div>
</div>

.flex-parent具有固定大小：

.flex-parent {
  height: 250px;
}

flex子的内容太多，应该溢出其父级的大小。相反，它的高度保持＆＃34;上限＆＃34;在父母的高度（250px）。

如何解决此问题并使.flex-child与其内容一起成长？我可以通过切换到display: block轻松修复它，但我的实际布局要复杂得多，这使得这种做法不切实际。

问题：http://codepen.io/anon/pen/OWjYwe
它应该如何运作：http://codepen.io/anon/pen/apyraV

Answer 1

在{strong>一个孩子的框中使用flex可能无用，除非是纵向/横向对齐。

要让flex-child在设置的高度上悬停，请将flex-direction重置为column：

  

请参阅@Michael B的答案，了解有关弹性项目大小调整算法的详细信息

＆＃13;

＆＃13;

.flex-parent {
  display: flex;
  height: 200px;
  flex-flow: column;
  border: solid;
}
.flex-child {
  background: cornflowerblue;
}

＆＃13;

<div class="flex-parent">
  <div class="flex-child">
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
  </div>
</div>
<p>What about me ?</p>

＆＃13;

＆＃13;

＆＃13;

您也可以使用overflow但行为不同：

＆＃13;

＆＃13;

.flex-parent {
  display: flex;
  height: 200px;
  overflow:auto;
  border:solid;
}

.flex-child {
  background: cornflowerblue;
}

＆＃13;

<div class="flex-parent">
  <div class="flex-child">
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
  </div>
</div>
<p>What about me ?</p>

＆＃13;

＆＃13;

＆＃13;

最后，使用min-height代替height

＆＃13;

＆＃13;

.flex-parent {
  display: flex;
  min-height: 200px;
  border:solid;
}

.flex-child {
  background: cornflowerblue;
}

＆＃13;

<div class="flex-parent">
  <div class="flex-child">
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
  </div>
</div>
<p>What about me ?</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将容器切换到flex-direction: column。

此解决方案使用flex item minimum sizing algorithm来实现您的布局。

默认情况下，弹性项目不能小于其内容的大小。

在行方向上，弹性项目的初始设置为min-width: auto。但这对你没有帮助，因为你正在寻找垂直而非水平的扩张。

在列方向上，初始设置为min-height: auto。这对你有帮助。它确保弹性项目永远不会短于内容的高度。

此处提供更多详细信息： Why doesn't flex item shrink past content size?