From 79a7cde87b740458e75e42a284bebd0903f7536a Mon Sep 17 00:00:00 2001
From: James300 <jamesstewart94.300@gmail.com>
Date: Tue, 10 Oct 2017 08:40:08 -0500
Subject: [PATCH] WIP - Fix Secondary Panes Scroll Bar (#4275)

---
 src/components/SecondaryPanes/CommandBar.css     |  1 -
 src/components/SecondaryPanes/SecondaryPanes.css |  9 +++++++--
 src/components/SecondaryPanes/index.js           | 10 ++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/SecondaryPanes/CommandBar.css b/src/components/SecondaryPanes/CommandBar.css
index c3c52e9c98..990825c180 100644
--- a/src/components/SecondaryPanes/CommandBar.css
+++ b/src/components/SecondaryPanes/CommandBar.css
@@ -3,7 +3,6 @@
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   overflow: hidden;
-  position: sticky;
   z-index: 1;
   background-color: var(--theme-toolbar-background);
 }
diff --git a/src/components/SecondaryPanes/SecondaryPanes.css b/src/components/SecondaryPanes/SecondaryPanes.css
index b10119bcc6..8d3cac7188 100644
--- a/src/components/SecondaryPanes/SecondaryPanes.css
+++ b/src/components/SecondaryPanes/SecondaryPanes.css
@@ -1,4 +1,5 @@
 .secondary-panes {
+  overflow: scroll;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -13,8 +14,12 @@
   the wrapper.
   Ref: https://github.com/devtools-html/debugger.html/issues/3426
 */
-.secondary-panes--sticky-commandbar {
-  overflow-y: scroll;
+
+.secondary-panes-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .secondary-panes .accordion {
diff --git a/src/components/SecondaryPanes/index.js b/src/components/SecondaryPanes/index.js
index 55cd6f9a03..3e39c26209 100644
--- a/src/components/SecondaryPanes/index.js
+++ b/src/components/SecondaryPanes/index.js
@@ -232,11 +232,13 @@ class SecondaryPanes extends Component {
 
   render() {
     return (
-      <div className="secondary-panes secondary-panes--sticky-commandbar">
+      <div className="secondary-panes-wrapper">
         <CommandBar horizontal={this.props.horizontal} />
-        {this.props.horizontal
-          ? this.renderHorizontalLayout()
-          : this.renderVerticalLayout()}
+        <div className="secondary-panes">
+          {this.props.horizontal
+            ? this.renderHorizontalLayout()
+            : this.renderVerticalLayout()}
+        </div>
         {this.renderUtilsBar()}
       </div>
     );