Div not expanding in width when zooming in

Question

I have a div that's centered, the width set to 50%, and the max-width set to 100%. However, when I zooms in, the width does not increase at all while the height increases every time I zooms in. Why is that happening even though I set the max-width to 100%, and how do I fix it? Thanks.

#outer {
border-radius: 10px;
background-color: #F5F5F5;
border: 1px dotted black;
width: 50%;
max-width: 100%;
margin: auto;
margin-top: 1%;
}

<div id = 'outer"></div>

PS: I still want to use percentage over pixels.

Answer 1

I think I understood what you want. Your problem is where you put your <div> .

As you probably know, percentage is a relative measure. In particular, width: 50% is relative to parent's width.

Case 1

Parent's width is 100% . In this case, your div 's width will allways be 50% of 100% which is 50% of the screen even if you zoom in/out.

Case 2

Parent div has an absolute width (for example 500px ). Then, your div 's width will be 50% of 500px , which is 250px . When you zoom in/out, this will change.

Here is a jsfiddle showing both cases. Hope this helps: https://jsfiddle.net/jormaechea/om91sody/