arc: Implement scrollable OptIn window content.

chrome/browser/resources/chromeos/arc_support/main.css

 /**
  * Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 html,
 body,
 webview,
 .section {
   font-family: 'Roboto';
   height: 100%;
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
+::-webkit-scrollbar {
+  background: transparent;
+  height: 4px;
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+  height: 16px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
 #arc-support {
+  flex: auto;
+  overflow: hidden;
   width: 960px;
 }
 
 #terms-view {
   width: 468px;
 }
 
 .button-separator {
   width: 1px;
 }
 
 .checkbox-option {
   height: 16px;
   margin: 0;
   padding: 0 8px 0 0;
   width: 16px;
 }
 
+.content {
+  /* Default window inner height (688px) minus image caption height (300px) */
+  height: 388px;
+  margin: 0;
+  padding: 0;
+}
+
 .image-header {
   display: block;
   height: 300px;
   padding: 0;
   width: 960px;
 }
 
+.scrollable {
+  flex: auto;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+}
+
 .section {
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 
 .section-buttons {
   margin: auto;
   padding: 16px 0 24px 0;
   width: 468px;
 }
 
 .section-flex {
   display: flex;
   flex-direction: column;
-  height: 688px;
 }
 
 .section-checkbox-container {
   margin: auto;
   padding: 8px 0 0 0;
   text-align: left;
   width: 468px;
 }
 
 .section-terms {
@@ skipping 55 matching lines @@
 
 a:link {
   color: rgb(51, 103, 214);
   text-decoration: none;
 }
 
 a:visited {
   color: rgb(51, 103, 214);
   text-decoration: none;
 }