--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -271,16 +271,25 @@
 
 .network-monitor .html-preview iframe {
   background-color: #fff;
   border: none;
   height: 100%;
   width: 100%;
 }
 
+/* The editor container should only become a flex item when inside a container
+ * with other flex items. In this case, the HTML preview is a flex item and we
+ * can grow the editor. Otherwise, there may be overflow and
+ * .editor-row-container will become 0px tall. */
+.network-monitor .contains-html-preview .editor-row-container {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Timings tabpanel */
 
 .network-monitor .timings-container {
   display: flex;
 }
 
 .network-monitor .timings-label {
   width: 10em;

--- a/devtools/client/netmonitor/src/components/ResponsePanel.js
+++ b/devtools/client/netmonitor/src/components/ResponsePanel.js
@@ -188,18 +188,23 @@ class ResponsePanel extends Component {
     // Others like text/html, text/plain, application/javascript
     object[RESPONSE_PAYLOAD] = {
       EDITOR_CONFIG: {
         text,
         mode: json ? "application/json" : mimeType.replace(/;.+/, ""),
       },
     };
 
+    let classList = ["panel-container"];
+    if (Filters.html(this.props.request)) {
+      classList.push("contains-html-preview");
+    }
+
     return (
-      div({ className: "panel-container" },
+      div({ className: classList.join(" ") },
         error && div({ className: "response-error-header", title: error },
           error
         ),
         PropertiesView({
           object,
           filterPlaceHolder: JSON_FILTER_TEXT,
           sectionNames: Object.keys(object),
           openLink,