WebUI NTP: fix content vertical scrolling

The content area does not show vertical scroll bar when the content does
not fit within browser content area.

Bug: 1067363
Change-Id: If2e5e5fe1d23d2c4709ef84f1c37a896e509e085
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2146087Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#758583}

chrome/browser/resources/new_tab_page/app.html

@@ -23,7 +23,8 @@
     width: 100%;
   }
 
-  #background > * {
+  #background > *,
+  #oneGoogleBar {
     height: 100%;
     position: absolute;
     top: 0;
@@ -39,13 +40,17 @@
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
   }
 
+  #contentContainer {
+    overflow: auto;
+  }
+
   #content {
     align-items: center;
     display: flex;
     flex-direction: column;
-    height: calc(100% - var(--ntp-one-google-bar-height));
-    top: var(--ntp-one-google-bar-height);
-    z-index: 1;
+    min-height: calc(100% - var(--ntp-one-google-bar-height));
+    padding-top: var(--ntp-one-google-bar-height);
+    position: relative;
   }
 
   #logo {
@@ -75,7 +80,7 @@
     background-color: var(--ntp-background-override-color);
     border-radius: calc(0.5 * var(--cr-button-height));
     bottom: 16px;
-    position: absolute;
+    position: fixed;
   }
 
   :host-context([dir='ltr']) #customizeButtonContainer {
@@ -110,7 +115,7 @@
     line-height: 20px;
     max-width: 50vw;
     padding: 8px;
-    position: absolute;
+    position: fixed;
     text-shadow: var(--ntp-theme-text-shadow);
   }
 
@@ -166,7 +171,11 @@
   <ntp-untrusted-iframe id="backgroundImage" hidden="[[!showBackgroundImage_]]">
   </ntp-untrusted-iframe>
   <div id="backgroundGradient" hidden="[[!showBackgroundImage_]]"></div>
+  <div id="contentContainer">
     <div id="content">
+      <ntp-untrusted-iframe id="oneGoogleBar" path="one-google-bar"
+          hidden$="[[!oneGoogleBarLoaded_]]">
+      </ntp-untrusted-iframe>
       <ntp-logo id="logo" doodle-allowed$="[[doodleAllowed_]]"
           single-colored$="[[singleColoredLogo_]]">
       </ntp-logo>
@@ -177,7 +186,8 @@
       <dom-if if="[[showCustomizeDialog_]]" restamp>
         <template>
           <ntp-customize-dialog on-close="onCustomizeDialogClose_"
-            theme="[[theme_]]" background-selection="{{backgroundSelection_}}">
+              theme="[[theme_]]"
+              background-selection="{{backgroundSelection_}}">
           </ntp-customize-dialog>
         </template>
       </dom-if>
@@ -189,8 +199,8 @@
       </dom-if>
       <ntp-untrusted-iframe id="promo" path="promo" hidden$="[[!promoLoaded_]]">
       </ntp-untrusted-iframe>
-    <!-- cr-button is transparent on hover. This leads to incorrect results when
-         a custom background is set. Therefore, wrap customize button in
+      <!-- cr-button is transparent on hover. This leads to incorrect results
+           when a custom background is set. Therefore, wrap customize button in
            container to enfore solid background color. -->
       <div id="customizeButtonContainer">
         <cr-button id="customizeButton" on-click="onCustomizeClick_">
@@ -213,7 +223,5 @@
         </div>
       </a>
     </div>
-  <ntp-untrusted-iframe id="oneGoogleBar" path="one-google-bar"
-      hidden$="[[!oneGoogleBarLoaded_]]">
-  </ntp-untrusted-iframe>
+  </div>
 </div>