How to show contents of div in @media print when div scrolls in @media screen

Question

Currently I have a <div> with overflow-y:scroll set. The issue is the contents won't show during print.

Ideally, I'd like the <div> to expand to show the entire contents but only during print (maybe using @media print )

I imagine this requires javascript but I'm not adept enough to figure it out on my own!

Thanks for helping

Answer 1

Set height of your <div> is auto and overflow-y: inherit in @media print :

@media print {
  // Reset to default height, overflow-y of div
  .your-div {
    height: auto;
    overflow-y: inherit;
  }
}

Answer 2

Just try to add this style to your @media print

div {
   overflow-y:show;
   /* Another your style */
}

This will make your content visible, although it exceeded the height limit of your div. Hope this link help you W3School: Overflow