print.css looks different on different browsers

Question

I have a page from which the user can print. But the print is not supposed to print everything just certain elements.

So I have a print.css file that takes care of that:

body{
    font-size:2.5em;
}

container-a{
    display: none;
}

container-b{
    display: none;
}

container-c{
    height: 50%;
    border-bottom: 2px solid black;
}

container-d{
    height: 50%;
    border-bottom: 2px solid black;
}

I develop on my Ubuntu machine with Chrome version 79.0.3945.88. So when I click Ctrl + P everything looks fine.

But then once I deployed and go check from my Windows machine with Chrome version 80.0.3987.163, the format is all wrong. The font size is way too big which causes only half to be displayed on the print page.

I tried using set values like 22px for the font size instead of 2.5em but that didn't change anything. In fact I have to go to the advanced settings and set the scale from "default" to "custom 60%" which then makes the print page look like my print page on my dev machine.

Why is there a difference? I thought since I use % and em it should look the same every where?

Answer 1

Smart as I am, the paper size options were not the same in both browsers.