Как сделать так, чтобы содержимое в конце столбца со 100% высотой прокручивалось?

Question

Требования:

Основной ряд должен иметь высоту 100%. Если строки переполняют столбец, то столбец должен быть прокручиваемым. Строки должны быть добавлены в конце столбца.

Теперь:

Когда высота строки равна 100% и строки переполнены, прокрутка столбца не работает. Но если они не переполнены, строки добавляются в конце. Но если я удаляю 100% высоты, прокрутка работает, но строки не добавляются в конце.

При высоте 100%:

Когда высота снята:

Мой код. Это не работает во фрагменте кода ...

html, body {
  height: 100%;
}

<div class="container h-100">
      <div class="row h-100 align-items-end" style="background-color: red;">
        <div class="col-12" style="overflow-y: auto;">
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
        </div>
      </div>
    </div>

Answer 1

Есть ли какая-то особая причина, по которой красный div является родительским свойством blue div вместо родного брата? попробуйте установить свойство overflow-y для .container для прокрутки следующим образом:

.container {
  overflow-y: scroll;  
 }

Answer 2

Вы можете просто использовать min-height vh во внешнем row.

.container>.row {
   min-height:100vh;
}

https://www.codeply.com/go/iFOOrsEKZa

---

Редактировать: Чтобы сделать выравниваемый снизу div с возможностью прокрутки для комментариев, используйте mt-auto вместо align-items-end, а затем установите max-height для родителя row ...

<div class="container">
  <div class="row" style="background-color: red;">
    <div class="col-12 mh-100 mt-auto" style="overflow-y: auto;">
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
    </div>
  </div>
</div>

https://www.codeply.com/go/IPTKiFgNA8