Solution 1 :

try with vh

height: calc(100vh - 120px);

Problem :

I have a wrapper with a class that sets it’s height based on a calc() wich is working smoothly on all browsers except in firefox. This is the snippet

  width: 340px;

  float: left;
  overflow:hidden;
  overflow-y:scroll;
  scrollbar-width: thin;

  height: calc(100% - 120px);

Any idea of what’s happening or what I’m missing out?

Does this answer to your question?

Totally fixed the problem. But what’s the reason why 100% isn’t working? I’m using percentages also on more parts of my CSS and everything works

parent height problem