Fix Chrome settings UI CSS; *height:fit-content now behaves differently.

fit-content in the block direction has little or no effect after the fix
for bug 902863, but we had settings UI CSS that depended on them. The
:host in settings_subpage.html used to be able to get the right height
propagated all the way from #main in settings_ui.html, but that's no
longer possible (since we cannot give #main a definite height anymore).
Therefore, use the viewport height instead, and subtract the space
taken up by the top toolbar.

Now chrome://settings and subpages, such as chrome://settings/content ,
render as expected again.

Bug: 965858, 965859
Change-Id: I966790ad21e018abdc8f3af91dc102594de340db
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1624905Reviewed-by: Dan Beam <dbeam@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#663015}

chrome/browser/resources/settings/settings_page/settings_subpage.html

@@ -17,10 +17,10 @@
     <style include="settings-shared">
       :host {
         background-color: var(--cr-card-background-color);
-        bottom: 0;
+        box-sizing: border-box;
         display: block;
         left: 0;
-        min-height: fit-content;
+        min-height: calc(100vh - var(--cr-toolbar-height));
         padding-bottom: 60px;
         position: absolute;
         right: 0;

chrome/browser/resources/settings/settings_ui/settings_ui.html

@@ -87,8 +87,6 @@
 
       #main {
         flex-basis: var(--settings-main-basis);
-        height: 100%;
-        min-height: fit-content;
       }
 
       /* The breakpoint of 980px was decided on by the rounded sum of

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

@@ -12,7 +12,6 @@
   <template>
     <style include="cr-icons cr-hidden-style">
       :host {
-        --cr-toolbar-height: 56px;
         align-items: center;
         background-color: var(--google-blue-700);
         color: #fff;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -238,6 +238,7 @@
         var(--cr-separator-color);
 
     --cr-toolbar-overlay-animation-duration: 150ms;
+    --cr-toolbar-height: 56px;
 
     --cr-container-shadow-height: 6px;
     --cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height));