How to remove overflow on printing CSS3

Question

I have a div with the overflow-y: scroll; property I need to remove this property when user execute the print (Ctrl+P)

<div id="taskList" class="uk-padding-small">

</div>

<style>

 #taskList{
            overflow-y: scroll;
            min-height: 400px;
            height: 400px;
        }

@media print {
#taskList{
        overflow-y: auto;
        min-height: auto;
        height: auto;
    }
}
</style>

This work fine with other properties like width, margin, padding. But I can't overwrite the overflow-y property and my document don't show the full content.

You can try this runnable. https://jsfiddle.net/atsuya007/j3f6d8ht/

Answer 1

By reversing the logic, it works

.fullheight{
  min-height:100%;
  height:fit-content;
}   
@media screen {
    .fullheight{
      height:100%;
      overflow:auto
    }
}

Answer 2

be sure to make the media print at the end of the CSS.