don't use flexbox to size `#site`

The approach in #7517 didn't work on Safari
(as in the entire page was invisible).

This is the same mechanism used to size the CodeMirror div on the edit page, and should work more reliably.

IPython/html/static/base/js/page.js

@@ -10,14 +10,20 @@ define([
 
     var Page = function () {
         this.bind_events();
-
-        // When the page is ready, resize the header.
-        var that = this;
-        $(function() { that._resize_header(); });
     };
 
     Page.prototype.bind_events = function () {
-        events.on('resize-header.Page', $.proxy(this._resize_header, this));
+        // resize site on:
+        // - window resize
+        // - header change
+        // - page load
+        var _handle_resize = $.proxy(this._resize_site, this);
+        
+        $(window).resize(_handle_resize);
+
+        // On document ready, resize codemirror.
+        $(document).ready(_handle_resize);
+        events.on('resize-header.Page', _handle_resize);
     };
 
     Page.prototype.show = function () {
@@ -44,12 +50,13 @@ define([
          * Main scripts should call this method after styling everything.
          * TODO: selector are hardcoded, pass as constructor argument
          */
-        $('div#site').css('display','block');
+        $('div#site').css('display', 'block');
+        this._resize_site();
     };
 
-    Page.prototype._resize_header = function() {
-        // Update the header's size.
-        $('#header-spacer').height($('#header').height());
+    Page.prototype._resize_site = function() {
+        // Update the site's size.
+        $('div#site').height(window.innerHeight - $('#header').height());
     };
 
     // Register self in the global namespace for convenience.

IPython/html/static/base/less/page.less

@@ -14,9 +14,6 @@ body {
     right: 0px;
     top: 0px;
     bottom: 0px;
-    @media not print {
-      .vbox();
-    }
     overflow: visible;
 }
 
@@ -85,10 +82,6 @@ body {
     display: none;
     .border-box-sizing();
     overflow: auto;
-    @media not print {
-      flex: 1;
-      height: 0px; // triggers overflow, but overridded by flex
-    }
 }
 
 /* Smaller buttons */

IPython/html/static/edit/js/main.js

@@ -90,7 +90,7 @@ require([
         // height twice.  Once for top padding and once for bottom padding.
         $('div.CodeMirror').height(window.innerHeight - header.height() - 2*header_margin_bottom);
     };
-    window.onresize = _handle_resize;
+    $(window).resize(_handle_resize);
 
     // On document ready, resize codemirror.
     $(document).ready(_handle_resize);

IPython/html/static/style/style.min.css

@@ -8267,24 +8267,6 @@ body {
   bottom: 0px;
   overflow: visible;
 }
-@media not print {
-  body {
-    /* Old browsers */
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-box-align: stretch;
-    display: -moz-box;
-    -moz-box-orient: vertical;
-    -moz-box-align: stretch;
-    display: box;
-    box-orient: vertical;
-    box-align: stretch;
-    /* Modern browsers */
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
 #header {
   /* Initially hidden to prevent FLOUC */
   display: none;
@@ -8349,12 +8331,6 @@ body {
   -webkit-box-sizing: border-box;
   overflow: auto;
 }
-@media not print {
-  #site {
-    flex: 1;
-    height: 0px;
-  }
-}
 /* Smaller buttons */
 .ui-button .ui-button-text {
   padding: 0.2em 0.8em;