Переполнение блока до верхней границы

Создаю мини-версию консоли на JS. Каждая введённая строка создаёт новый div с моим текстом или текстом ответа и добавляет его в общий блок. Но несмотря на добавленный overflow: scroll; бегунки появляются и остаются неактивными даже когда текст лезет за край блока, где благополучно скрывается.

#terminalbody {
  width: 55vw;
  height: 500px;
  background-color: #fff;
  position: relative;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  margin-bottom: 3vh;
  overflow: scroll;
}

#terminalbody>div {
  color: rgb(96, 194, 16);
  margin-bottom: 10px;
  font-family: 'Lucida Console', sans-serif;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  white-space: pre-wrap;
}