--- a/devtools/client/responsive.html/components/Browser.js
+++ b/devtools/client/responsive.html/components/Browser.js
@@ -42,18 +42,17 @@ class Browser extends PureComponent {
    * the browser is fully ready.  Without waiting for an event such as this, we don't know
    * whether all frame state for the browser is fully initialized (since some happens
    * async after the element is added), and swapping browsers can fail if this state is
    * not ready.
    */
   componentWillMount() {
     this.browserShown = new Promise(resolve => {
       let handler = frameLoader => {
-        let browser = this.refs.browserContainer.querySelector("iframe.browser");
-        if (frameLoader.ownerElement != browser) {
+        if (frameLoader.ownerElement != this.browser) {
           return;
         }
         Services.obs.removeObserver(handler, "remote-browser-shown");
         resolve();
       };
       Services.obs.addObserver(handler, "remote-browser-shown");
     });
   }
@@ -93,18 +92,20 @@ class Browser extends PureComponent {
     let { width, height } = msg.data;
     onContentResize({
       width,
       height,
     });
   }
 
   async startFrameScript() {
-    let { onContentResize } = this;
-    let browser = this.refs.browserContainer.querySelector("iframe.browser");
+    let {
+      browser,
+      onContentResize,
+    } = this;
     let mm = browser.frameLoader.messageManager;
 
     // Notify tests when the content has received a resize event.  This is not
     // quite the same timing as when we _set_ a new size around the browser,
     // since it still needs to do async work before the content is actually
     // resized to match.
     e10s.on(mm, "OnContentResize", onContentResize);
 
@@ -119,48 +120,47 @@ class Browser extends PureComponent {
     await e10s.request(mm, "Start", {
       requiresFloatingScrollbars,
       // Tests expect events on resize to wait for various size changes
       notifyOnResize: flags.testing,
     });
   }
 
   async stopFrameScript() {
-    let { onContentResize } = this;
-    let browser = this.refs.browserContainer.querySelector("iframe.browser");
+    let {
+      browser,
+      onContentResize,
+    } = this;
     let mm = browser.frameLoader.messageManager;
 
     e10s.off(mm, "OnContentResize", onContentResize);
     await e10s.request(mm, "Stop");
     message.post(window, "stop-frame-script:done");
   }
 
   render() {
     // In the case of @remote and @remoteType, the attribute must be set before the
     // element is added to the DOM to have any effect, which we are able to do with this
     // approach.
     //
     // @noisolation and @allowfullscreen are needed so that these frames have the same
     // access to browser features as regular browser tabs. The `swapFrameLoaders` platform
     // API we use compares such features before allowing the swap to proceed.
-    return dom.div(
+    return dom.iframe(
       {
-        ref: "browserContainer",
-        className: "browser-container",
-      },
-      dom.iframe(
-        {
-          allowFullScreen: "true",
-          className: "browser",
-          height: "100%",
-          mozbrowser: "true",
-          noisolation: "true",
-          remote: "true",
-          remotetype: "web",
-          src: "about:blank",
-          width: "100%",
-        }
-      )
+        allowFullScreen: "true",
+        className: "browser",
+        height: "100%",
+        mozbrowser: "true",
+        noisolation: "true",
+        remote: "true",
+        remotetype: "web",
+        src: "about:blank",
+        width: "100%",
+        ref: browser => {
+          this.browser = browser;
+        },
+      }
     );
   }
 }
 
 module.exports = Browser;

--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -263,21 +263,16 @@ select > option.divider {
 .viewport-content.resizing {
   pointer-events: none;
 }
 
 /**
  * Viewport Browser
  */
 
-.browser-container {
-  width: inherit;
-  height: inherit;
-}
-
 .browser {
   display: block;
   border: 0;
   -moz-user-select: none;
 }
 
 .browser:-moz-focusring {
   outline: none;