I have a modal popup in my website with its max height set to 20.625rem.Now this modal popup already shows a scrollbar when its content exceeds the max height threshold value of 20.625rem.

this is the css for the container;

margin-right: 0.825rem;
margin-top: 2.425rem;
overflow-x: hidden;
overflow-y: scroll;

max-height: 20.625rem;
padding: 0 1.125rem;
position: relative;
width: 18.75rem;

click the following link to see image

Now i have an additional requirement were if the page is zoomed at 200% through browser , then in that condition the scrollbar should be visible regardless of whether the max height threshold of 20.625rem of the container was reached or not.This is particularly to combat the issue were if currently the page is zoomed at 200% through the chrome browser then the modal popup is getting cut and since the max height threshold of 20.625rem is yet not reached the scrollbar will also not showup.(see image below)

click to see image

Can the zooming issue be solved using media queries ?? I heard that We don't need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices.

For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between zooming and pixel width at mqtest.io [archived] ) which is nearby 768px of ipad mini.

i.e @media screen and (min-width:732px)

Please help in resolving this issue ??