Why is content hidden for landscape page in media print

Question

Am trying to print pages in portrait and landscape.

I have managed to get the page orientation in landscape with the following css snippet

 @page landscape {
   size: 9in 6in;
 }

But the content in landscape page seems to render in portrait.

As can be seen in this fiddle

I have also marked the body css to be

   overflow:visible

Can someone guide me how the get the page content render in landscape mode for landscape page, without content getting cut.

P.S Check this in chrome

Answer 1

I consider the missing property to fix your print page rendering is the ISO paper size. Please try the following snippet:

/* ISO Paper Size */
@page {
 size: A4 landscape;
}

/* Size in inches */    
@page {
 size: 9in 6in landscape;
}