用flex-end溢出-为什么没有滚动条？

Question

有人可以帮我解释一下为什么“ .child”元素超出其父元素，但是却没有出现溢出Y滚动条吗？看看笔。左侧的容器显示有3个子项的父项。右侧的容器显示了父项，其中有6项超出了父项。

目标是将所有“ .child”项推到其“ .parent”容器的底部，如果我添加更多，它将从底部扩展到顶部，直到达到父级的极限为止滚动条出现。这与聊天框Messenger窗口的行为类似。

Codepen

.outside {
  height: 200px;
  width: 200px;
  border: 4px solid green;
  overflow-y: auto;
}

.parent {
  height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.child {
  height: 40px;
  width: 100%;
  background: #f00;
  flex: 0 0 auto;
}

.child:nth-child(odd) {
  background: red;
}

.child:nth-child(even) {
  background: blue;
}

<div class="outside" style="float:left; margin-right:10px">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>

  </div>
</div>

<div class="outside">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>
    <div class="child">
      Align to the bottom 4
    </div>
    <div class="child">
      Align to the bottom 5
    </div>
    <div class="child">
      Align to the bottom 6
    </div>
  </div>
</div>

Answer 1

在min-height: 100%上使用.parent而不是height: 100%：

.outside {
  height: 200px;
  width: 200px;
  border: 4px solid green;
  overflow-y: auto;
}

.parent {
  min-height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.child {
  height: 40px;
  width: 100%;
  background: #f00;
  flex: 0 0 auto;
}

.child:nth-child(odd) {
  background: red;
}

.child:nth-child(even) {
  background: blue;
}

<div class="outside" style="float:left; margin-right:10px">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>

  </div>
</div>

<div class="outside">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>
    <div class="child">
      Align to the bottom 4
    </div>
    <div class="child">
      Align to the bottom 5
    </div>
    <div class="child">
      Align to the bottom 6
    </div>
  </div>
</div>

如果您不想看到水平滚动条，则可能还想将overflow-x: hidden添加到.outside中。或者，您可以在父级上使用width:100%。

.outside {
  height: 200px;
  width: 200px;
  border: 4px solid green;
  overflow-y: auto;
  overflow-x: hidden;
}

.parent {
  min-height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.child {
  height: 40px;
  width: 100%;
  background: #f00;
  flex: 0 0 auto;
}

.child:nth-child(odd) {
  background: red;
}

.child:nth-child(even) {
  background: blue;
}

<div class="outside" style="float:left; margin-right:10px">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>

  </div>
</div>

<div class="outside">
  <div class="parent">
    <div class="child">
      Align to the bottom 1
    </div>
    <div class="child">
      Align to the bottom 2
    </div>
    <div class="child">
      Align to the bottom 3
    </div>
    <div class="child">
      Align to the bottom 4
    </div>
    <div class="child">
      Align to the bottom 5
    </div>
    <div class="child">
      Align to the bottom 6
    </div>
  </div>
</div>