diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 1a4a2231..c80a850 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,29 @@
 2019-12-05  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Elements: the Classes toggle is drawn on top of other content with no other way of scrolling to it
+        https://bugs.webkit.org/show_bug.cgi?id=204690
+
+        Reviewed by Timothy Hatcher.
+
+        Use a vertical flexbox for the contents of sidebar panels instead of absolute positioning so
+        that the variable height Classes "drawer" can have it's own scroll area and doesn't take up
+        any space from the rest of the panel's contents.
+
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content):
+        (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container):
+        (.sidebar > .panel.details.css-style > .content ~ .class-list-container):
+        (.sidebar > .panel.details.css-style > .content.has-filter-bar): Deleted.
+
+        * UserInterface/Views/Sidebar.css:
+        (.sidebar > .panel):
+        (.sidebar > .panel.selected): Deleted.
+
+2019-12-05  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: Search: there should be some default content when there is no search string
         https://bugs.webkit.org/show_bug.cgi?id=204631
 
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
index 0b141e4..105ee33 100644
--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
@@ -24,17 +24,7 @@
  */
 
 .sidebar > .panel.details.css-style > .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.sidebar > .panel.details.css-style > .content.has-filter-bar {
-    bottom: calc(var(--navigation-bar-height) - 1px);
+    position: relative;
 }
 
 .sidebar > .panel.details.css-style > .content > .pseudo-classes {
@@ -65,8 +55,8 @@
 
 .sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container) {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    position: absolute;
     /* Make sure options and class containers are above details section headers, but below popovers. */
     z-index: calc(var(--z-index-header) + 1);
     width: 100%;
@@ -74,7 +64,6 @@
 }
 
 .sidebar > .panel.details.css-style > .content ~ .options-container {
-    bottom: 0;
     height: calc(var(--console-prompt-min-height) - 1px);
     padding-top: 1px;
 }
@@ -146,7 +135,6 @@
 
 .sidebar > .panel.details.css-style > .content ~ .class-list-container {
     flex-wrap: wrap;
-    bottom: calc(var(--console-prompt-min-height) - 1px);
     max-height: 75px;
     padding: 3px 2px;
     background-color: var(--panel-background-color);
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
index 04a5567..8e2959b 100644
--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
@@ -155,6 +155,19 @@
 
         this._showPanel(this._panel);
 
+        this._classListContainer = this.element.createChild("div", "class-list-container");
+        this._classListContainer.hidden = true;
+
+        this._addClassContainer = this._classListContainer.createChild("div", "new-class");
+        this._addClassContainer.title = WI.UIString("Add a Class");
+        this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
+
+        this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
+        this._addClassInput.spellcheck = false;
+        this._addClassInput.setAttribute("placeholder", WI.UIString("Add New Class"));
+        this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
+        this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
+
         let optionsContainer = this.element.createChild("div", "options-container");
 
         let newRuleButton = optionsContainer.createChild("img", "new-rule");
@@ -172,19 +185,6 @@
         this._classToggleButton.title = WI.UIString("Toggle Classes");
         this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
 
-        this._classListContainer = this.element.createChild("div", "class-list-container");
-        this._classListContainer.hidden = true;
-
-        this._addClassContainer = this._classListContainer.createChild("div", "new-class");
-        this._addClassContainer.title = WI.UIString("Add a Class");
-        this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
-
-        this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
-        this._addClassInput.spellcheck = false;
-        this._addClassInput.setAttribute("placeholder", WI.UIString("Add New Class"));
-        this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
-        this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
-
         WI.cssManager.addEventListener(WI.CSSManager.Event.StyleSheetAdded, this._styleSheetAddedOrRemoved, this);
         WI.cssManager.addEventListener(WI.CSSManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
 
diff --git a/Source/WebInspectorUI/UserInterface/Views/Sidebar.css b/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
index 3ec06c5..bf4ad25 100644
--- a/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
+++ b/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
@@ -43,14 +43,13 @@
 }
 
 .sidebar > .panel {
+    display: flex;
+    flex-direction: column;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-
-    display: none;
-
     overflow: hidden;
 }
 
@@ -58,10 +57,6 @@
     top: var(--navigation-bar-height);
 }
 
-.sidebar > .panel.selected {
-    display: block;
-}
-
 body[dir=ltr] .sidebar.right > .resizer,
 body[dir=rtl] .sidebar.left > .resizer {
     left: -3px;