当容器达到最小尺寸时，Flexbox会溢出

Question

我有一个内部有2个div的flex列容器。第一个div有flex: 1以使其与剩余空间一起增长。第二个div有一个固定的高度。请注意，容器位于占据整个视口的固定div内。

问题是，当容器太小而不适合内容时，第一个div的内容会溢出第二个。

.test {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //min-height: 500px;
}
.child1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.child2 {
  width: 100%;
  display: flex;
  justify-content: center;
}
span {
  padding: 20px;
}
span:first-child {
  margin-top: auto;
}
span:last-child {
  margin-bottom: auto;
}

<div class="test">
  <div class="child1">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
    <span>Test5</span>
    <span>Test6</span>
    <span>Test7</span>
    <span>Test8</span>
  </div>
  <div class="child2">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
  </div>
</div>

这是codepen example。

一种解决方案可能是在容器上设置最小高度，但它不是一个动态且响应迅速的解决方案。

有人可以告诉我当整个内容不适合时如何在容器上实现溢出行为吗？

Answer 1

您可以将overflow:auto添加到.test并更新flex上的.child1值：DEMO to play with

＆＃13;

＆＃13;

.test {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow:auto;/* update */
}

.child1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;/* update (IE)*/
  flex: 1 0 auto;/* update *//* flex-shrink:0 allow element to expand and push next container else overflow defaut  is visible IF SET TO 1 */
}

.child2 {
  width: 100%;
  display: flex;
  justify-content: center;
}

span {
  padding: 20px;
}

span:first-child {
  margin-top: auto;
}

span:last-child {
  margin-bottom: auto;
}

＆＃13;

<div class="test">
  <div class="child1">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
    <span>Test5</span>
    <span>Test6</span>
    <span>Test7</span>
    <span>Test8</span>
  </div>
  <div class="child2">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;