Custom CSS calc()


I’m trying to put some custom css to fit my need on a specific element :

#re-main-content {
    height: calc(100vh - 70px) !important;
    overflow-y: scroll !important;

I put this code in a html element. With height: 100vh, it works well.
Once i’m trying to add the calculation “minus 70px” which corresponds to the height of my header.
It does not work at all.

There is something specific to apply for bubble to interpret the calc() ?


Check the min-height you have set on the element. Min-height will override the height property.

EDIT : error on my side, there was an overriding because I duplicate the custom css on another reusable element. It was too late to work :yawning_face:

it’s 0 px. So the issue is elswhere.
what is weird, the style is properly set in the html source code.
But in the css column console, it stays to 100vh !important …

Capture d’écran 2023-03-08 à 22.31.38
Capture d’écran 2023-03-08 à 22.31.30