Переполнение с помощью flex-end - Почему нет полосы прокрутки?

Question

Может кто-нибудь объяснить, почему элементы ".child" превышают своих родительских, но не отображается полоса прокрутки overflow-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

Используйте 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>