CSS #media doing strange things - html

Question

I have a HTML element:
<div id=... class="pie-chart-container"></div>
I'm trying to change the size of this div depending on whether media type is screen or print.
Originally, my CSS styles defined the size of the screen version, and then #media print to change the size of the printed version. This wasn't working as I expected, so I swapped around the styles to define the print version, and then use #media screen to control the size of the screen version, as follows:
.pie-chart-container {
width: 20cm;
height: 25cm;
margin: auto;
}
#media screen {
.pie-chart-container {
width: 80vw;
height: 100vh;
}
}
However, this also seems to be behaving strangely, as when I change the width and height inside the media query, the dimensions of the div are changed in the print version (and also the screen version). Changing the width and height in the first selector, outside the media query, also has an effect on the printed version, but not in the same way as changing the values inside the media query - changing the values in the selector outside the query seems to increase the space the div takes up, without changing the size of the elements inside the div very much, although the elements inside do move around a little.
If anyone has any knowledge on what/why this is happening, I would be very greatful if you shared it.
Note: I am using Chrome's print preview to view the effects of the styles on the printed version.
Update: This div contains a Google Chart, so there is a massive amount of code inside. The top few levels look like this:
<div id="donutchart2" class="pie-chart-container">
<div style="position: relative">
<div dir="ltr" style="position: relative; width: 1138px; height: 653px">
<div
aria-label="A chart."
style="
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
"
>
</div>
</div>
</div>
<div
aria-hidden="true"
style="
display: none;
position: absolute;
top: 663px;
left: 1148px;
white-space: nowrap;
font-family: Arial;
font-size: 15px;
font-weight: bold;
"
>
</div>
<div></div>
</div>
</div>