Overflow-y with flex-end - 为什么没有滚动条？

Question

有人可以解释一下为什么“.child”元素超过了它们的父元素但没有出现溢出-y 滚动条吗？看看钢笔。左侧的容器显示了具有 3 个子项的父项。右侧的容器显示了父级，其中超过了父级的 6 个项目。

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

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

在.parent 上使用min-height: 100% 而不是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>