diff --git a/addons/web/static/src/scss/base_frontend.scss b/addons/web/static/src/scss/base_frontend.scss
index c300b3db38e..8513806e12d 100644
--- a/addons/web/static/src/scss/base_frontend.scss
+++ b/addons/web/static/src/scss/base_frontend.scss
@@ -2,7 +2,6 @@
 html, body, #wrapwrap {
     width: 100%;
     height: 100%;
-    overflow: hidden;
 }
 #wrapwrap {
     // The z-index is useful to prevent that children with a negative z-index
@@ -11,11 +10,6 @@ html, body, #wrapwrap {
     position: relative;
     display: flex;
     flex-flow: column nowrap;
-    // ... we delegate the scroll to that top element instead of the window/body
-    // This is at least needed for the edit mode to not have a double scrollbar
-    // due to the right editor panel (and since we want to minimize the style
-    // difference between edit mode and non-edit mode (wysiwyg)...).
-    overflow: auto;
 
     > * {
         flex: 0 0 auto;
@@ -27,3 +21,20 @@ html, body, #wrapwrap {
 .modal-open #wrapwrap {
     overflow: hidden;
 }
+
+// TODO: This whole block can be removed once the scroll bar is moved back from
+//       the #wrapwrap to the body. The fact the scroll bar is on the #wrapwrap
+//       prevent browser to print more than what is above the fold. This block
+//       is moving the scroll to the body when printing the page.
+@media screen {
+    html, body {
+        overflow: hidden;
+    }
+    #wrapwrap {
+        // ... we delegate the scroll to that top element instead of the window/body
+        // This is at least needed for the edit mode to not have a double scrollbar
+        // due to the right editor panel (and since we want to minimize the style
+        // difference between edit mode and non-edit mode (wysiwyg)...).
+        overflow: auto;
+    }
+}