--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1234,18 +1234,22 @@
       <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" hidden="true"/>
       <vbox id="appcontent" flex="1">
         <notificationbox id="high-priority-global-notificationbox" notificationside="top"/>
         <tabbox id="tabbrowser-tabbox"
                     flex="1" eventnode="document" tabcontainer="tabbrowser-tabs"
                     onselect="if (event.target.localName == 'tabpanels') gBrowser.updateCurrentBrowser();">
           <tabpanels flex="1" class="plain" selectedIndex="0" id="tabbrowser-tabpanels">
             <notificationbox flex="1" notificationside="top">
-              <hbox flex="1" class="browserSidebarContainer">
-                <vbox flex="1" class="browserContainer">
+              <!-- Set large flex to allow the devtools toolbox to set a flex attribute.
+                   We don't want the toolbox to actually take up free space, but we do want it to collapse when the window shrinks, and with flex=0 it can't.
+                   When the toolbox is on the bottom it's a sibling of browserSidebarContainer,
+                   and when it's on the side it's a sibling of browserContainer.  -->
+              <hbox flex="10000" class="browserSidebarContainer">
+                <vbox flex="10000" class="browserContainer">
                   <stack flex="1" class="browserStack">
                     <browser id="tabbrowser-initialBrowser" type="content"
                              message="true" messagemanagergroup="browsers"
                              primary="true" blank="true"
                              tooltip="aHTMLTooltip"
                              contextmenu="contentAreaContextMenu"
                              autocompletepopup="PopupAutoComplete"
                              selectmenulist="ContentSelectDropdown"

--- a/browser/base/content/tabbrowser.js
+++ b/browser/base/content/tabbrowser.js
@@ -1863,23 +1863,23 @@ window._gBrowser = {
     stack.className = "browserStack";
     stack.appendChild(b);
     stack.setAttribute("flex", "1");
 
     // Create the browserContainer
     let browserContainer = document.createElementNS(this._XUL_NS, "vbox");
     browserContainer.className = "browserContainer";
     browserContainer.appendChild(stack);
-    browserContainer.setAttribute("flex", "1");
+    browserContainer.setAttribute("flex", "10000");
 
     // Create the sidebar container
     let browserSidebarContainer = document.createElementNS(this._XUL_NS, "hbox");
     browserSidebarContainer.className = "browserSidebarContainer";
     browserSidebarContainer.appendChild(browserContainer);
-    browserSidebarContainer.setAttribute("flex", "1");
+    browserSidebarContainer.setAttribute("flex", "10000");
 
     // Add the Message and the Browser to the box
     let notificationbox = document.createElementNS(this._XUL_NS, "notificationbox");
     notificationbox.setAttribute("flex", "1");
     notificationbox.setAttribute("notificationside", "top");
     notificationbox.appendChild(browserSidebarContainer);
 
     // Prevent the superfluous initial load of a blank document

--- a/devtools/client/framework/toolbox-hosts.js
+++ b/devtools/client/framework/toolbox-hosts.js
@@ -62,16 +62,17 @@ BottomHost.prototype = {
     this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
 
     this._splitter = ownerDocument.createElement("splitter");
     this._splitter.setAttribute("class", "devtools-horizontal-splitter");
     // Avoid resizing notification containers
     this._splitter.setAttribute("resizebefore", "flex");
 
     this.frame = ownerDocument.createElement("iframe");
+    this.frame.flex = 1; // Required to be able to shrink when the window shrinks
     this.frame.className = "devtools-toolbox-bottom-iframe";
     this.frame.height = Math.min(
       Services.prefs.getIntPref(this.heightPref),
       this._nbox.clientHeight - MIN_PAGE_SIZE
     );
 
     this._nbox.appendChild(this._splitter);
     this._nbox.appendChild(this.frame);
@@ -206,16 +207,17 @@ SidebarHost.prototype = {
     let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
     let ownerDocument = gBrowser.ownerDocument;
     this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
 
     this._splitter = ownerDocument.createElement("splitter");
     this._splitter.setAttribute("class", "devtools-side-splitter");
 
     this.frame = ownerDocument.createElement("iframe");
+    this.frame.flex = 1; // Required to be able to shrink when the window shrinks
     this.frame.className = "devtools-toolbox-side-iframe";
 
     this.frame.width = Math.min(
       Services.prefs.getIntPref(this.widthPref),
       this._sidebar.clientWidth - MIN_PAGE_SIZE
     );
 
     this._sidebar.appendChild(this._splitter);

--- a/devtools/client/shared/test/browser_flame-graph-01.js
+++ b/devtools/client/shared/test/browser_flame-graph-01.js
@@ -37,19 +37,19 @@ async function performTest() {
 function testGraph(host, graph) {
   ok(graph._container.classList.contains("flame-graph-widget-container"),
     "The correct graph container was created.");
   ok(graph._canvas.classList.contains("flame-graph-widget-canvas"),
     "The correct graph container was created.");
 
   let bounds = host.frame.getBoundingClientRect();
 
-  is(graph.width, bounds.width * window.devicePixelRatio,
+  is(graph.width, Math.round(bounds.width * window.devicePixelRatio),
     "The graph has the correct width.");
-  is(graph.height, bounds.height * window.devicePixelRatio,
+  is(graph.height, Math.round(bounds.height * window.devicePixelRatio),
     "The graph has the correct height.");
 
   ok(graph._selection.start === null,
     "The graph's selection start value is initially null.");
   ok(graph._selection.end === null,
     "The graph's selection end value is initially null.");
 
   ok(graph._selectionDragger.origin === null,