Почему Scroll не работает на firefox, но работает на Chrome?

Question

Я застрял на несколько дней из-за проблемы с прокруткой на Firefox (пробовал на Chrome и работает нормально).

Как видите, у меня есть две полосы прокрутки, одна для чата слева, которая работает очень хорошо. Чтобы это работало, у меня есть следующее css: родительский div:

{

border-radius: 8px;
box-shadow: rgb(153, 153, 153) 0px 0px 5px;
color:rgb(136, 136, 136);
height: 100%;
}

child div со свитком:

{
height: calc(100% - 80px);
overflow: scroll;
} 

Это работает нормально, однако, когда я применяю те же логи c в моей области чата не работают на firefox.

Родительский div:

{
border-radius: 8px;
box-shadow: 
rgb(153, 153, 153) 0px 0px 5px;
height: 100%;
}

Child div:

{
  color: rgb(136, 136, 136);
  display: flex;
  flex-direction: column-reverse;
  height: calc(100% - 40px);
  padding: 10px;
  overflow-y: scroll;
  scrollbar-color:#0A4C95 #C2D2E4
}

Когда я пытаюсь прокрутка, только серая полоса полностью в нужном направлении (эта серая полоса не является частью моего приложения, но, вероятно, частью браузера firefox).

Я понятия не имею, что происходит и почему это работает на chrome, а не firefox.

Любая помощь приветствуется. Спасибо