Chrome will increase the font size when zooming out

Question

I have the following code :

CSS

#container{
    font-size: 0.625em;
}

#div1 {
    width: 200px;
    height: 200px;
    background-color: green;
}
         


        

Answer 1

The divs has different width.

10em is not always equivalent to 100px

try setting the same width (em or px)

An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt

One pixel is equal to one dot on the computer screen

refer this page for documentation

your updated fiddle here

body {
            font-size: 0.625em;
        }

        #div1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        #div2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

update

if it doesn't work try with this css property

-webkit-text-size-adjust: none;