--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -63,16 +63,17 @@ toolbar[customizable="true"] {
 }
 %endif
 
 #toolbar-menubar[autohide="true"] {
   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide");
 }
 
 panelmultiview {
+  -moz-box-align: start;
   -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelmultiview");
 }
 
 panelview {
   -moz-box-orient: vertical;
 }
 
 panel[hidden] panelmultiview {

--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -636,32 +636,36 @@ this.PanelMultiView = class {
       viewRect = Object.assign({height, width}, viewNode.customRectGetter());
       let header = viewNode.firstChild;
       if (header && header.classList.contains("panel-header")) {
         viewRect.height += this._dwu.getBoundsWithoutFlushing(header).height;
       }
       viewNode.setAttribute("in-transition", true);
     } else {
       let oldSibling = viewNode.nextSibling || null;
+      this._offscreenViewStack.style.minHeight =
+        this._viewContainer.style.height;
       this._offscreenViewStack.appendChild(viewNode);
       viewNode.setAttribute("in-transition", true);
 
       // Now that the subview is visible, we can check the height of the
       // description elements it contains.
       this.descriptionHeightWorkaround(viewNode);
 
       viewRect = await BrowserUtils.promiseLayoutFlushed(this.document, "layout", () => {
         return this._dwu.getBoundsWithoutFlushing(viewNode);
       });
 
       try {
         this._viewStack.insertBefore(viewNode, oldSibling);
       } catch (ex) {
         this._viewStack.appendChild(viewNode);
       }
+
+      this._offscreenViewStack.style.removeProperty("min-height");
     }
 
     this._transitioning = true;
     details.phase = TRANSITION_PHASES.PREPARE;
 
     // The 'magic' part: build up the amount of pixels to move right or left.
     let moveToLeft = (this._dir == "rtl" && !reverse) || (this._dir == "ltr" && reverse);
     let deltaX = previousRect.width;
@@ -878,16 +882,17 @@ this.PanelMultiView = class {
         // currently 11px on Mac, 13px on Windows, and 13px on Linux. We also
         // want an extra margin, both for visual reasons and to prevent glitches
         // due to small rounding errors. So, we just use a value that makes
         // sense for all platforms. If the arrow visuals change significantly,
         // this value will be easy to adjust.
         const EXTRA_MARGIN_PX = 20;
         maxHeight -= EXTRA_MARGIN_PX;
         this._viewStack.style.maxHeight = maxHeight + "px";
+        this._offscreenViewStack.style.maxHeight = maxHeight + "px";
 
         // When using block-in-box layout inside a scrollable frame, like in the
         // main menu contents scroller, if we allow the contents to scroll then
         // it will not cause its container to expand. Thus, we layout first
         // without any scrolling (using "display: flex;"), and only if the view
         // exceeds the available space we set the height explicitly and enable
         // scrolling.
         let mainView = this._mainView;

--- a/browser/components/customizableui/content/panelUI.css
+++ b/browser/components/customizableui/content/panelUI.css
@@ -19,17 +19,9 @@
 }
 
 panelmultiview[transitioning] {
   pointer-events: none;
 }
 
 .panel-viewcontainer.offscreen {
   position: absolute;
-  top: 100000px;
-  left: 100000px;
 }
-
-.panel-viewcontainer.offscreen,
-.panel-viewcontainer.offscreen > .panel-viewstack {
-  margin: 0;
-  padding: 0;
-}