--- a/browser/components/customizableui/content/jar.mn
+++ b/browser/components/customizableui/content/jar.mn
@@ -1,10 +1,11 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
   content/browser/customizableui/panelUI.css
   content/browser/customizableui/panelUI.js
   content/browser/customizableui/panelUI.xml
+  content/browser/customizableui/test.xul
   content/browser/customizableui/toolbar.xml
 

new file mode 100644
--- /dev/null
+++ b/browser/components/customizableui/content/test.xul
@@ -0,0 +1,143 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        orient="horizontal" pack="end" align="start">
+
+<style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+stack > vbox.mozStackSizingIgnore { -moz-stack-sizing: ignore;  }
+stack > vbox:not(.mozStackSizingIgnore) { outline: 3px solid #00f; }
+.view { background-color: #eee; }
+.body { overflow: auto; }
+.element { border: 1px solid #060; margin: 0; }
+.stack { background-color: #ddd; padding: 10px; width: 300px;
+         transition: height 1s ease-out; }
+]]></style>
+
+<!-- Apparently orient="horizontal" is important to avoid flickering. -->
+<panel id="panel" type="arrow" orient="horizontal">
+  <vbox style="overflow: hidden;">
+    <description value="Click headers to toggle stack sizing." />
+    <stack id="stack" class="stack">
+
+      <vbox style="margin-right: 200px;"
+            class="view"
+            onclick="toggleStackSizingAndAnimateHeight(this);">
+        <description value="HEADER"/>
+        <vbox flex="1" class="body">
+          <description value="BODY"/>
+        </vbox>
+        <description value="FOOTER"/>
+      </vbox>
+
+      <vbox style="margin-right: 100px; margin-left: 100px;"
+            class="view"
+            onclick="toggleStackSizingAndAnimateHeight(this);">
+        <description value="HEADER"/>
+        <vbox flex="1" class="body">
+          <description value="BODY"/>
+        </vbox>
+        <description value="FOOTER"/>
+      </vbox>
+
+      <vbox style="margin-left: 200px;"
+            class="view mozStackSizingIgnore"
+            onclick="toggleStackSizingAndAnimateHeight(this);">
+        <description value="HEADER"/>
+        <vbox flex="1" class="body">
+          <description value="BODY"/>
+        </vbox>
+        <description value="FOOTER"/>
+      </vbox>
+    </stack>
+  </vbox>
+</panel>
+
+<script><![CDATA[
+
+let count = 5;
+for (let container of document.querySelectorAll(".body")) {
+  for (let i = 0; i < count; i++) {
+    let desc = document.createElement("description");
+    desc.setAttribute("class", "element");
+    desc.setAttribute("value", "REMOVABLE");
+    desc.setAttribute("onclick", "this.remove();event.stopPropagation();");
+    container.appendChild(desc);
+  }
+  count += 10;
+}
+
+let panel = document.getElementById("panel");
+setInterval(() => {
+  panel.openPopup(null);
+}, 100);
+
+let stack = document.getElementById("stack");
+stack.addEventListener("transitionend", function() {
+  stack.style.height = "auto";
+});
+
+// This should be set based on the anchor position to limit the panel height.
+//stack.style.maxHeight = "400px";
+
+function toggleStackSizingAndAnimateHeight(vbox) {
+  let rect = panel.popupBoxObject.getOuterScreenRect();
+  panel.setAttribute("width", rect.width);
+  panel.setAttribute("height", rect.height);
+
+  let oldHeight = stack.getBoundingClientRect().height;
+
+  vbox.classList.toggle('mozStackSizingIgnore');
+
+  stack.style.height = "auto";
+  let newHeight = stack.getBoundingClientRect().height;
+
+  panel.removeAttribute("width");
+  panel.removeAttribute("height");
+
+  if (oldHeight != newHeight) {
+    stack.style.height = oldHeight + "px";
+    // This is required for the transition to happen.
+    stack.getBoundingClientRect().height;
+    stack.style.height = newHeight + "px";
+  }
+}
+
+]]></script>
+
+<vbox style="padding: 10px; width: 100px; background-color: #bbb;">
+  <description value="CORRECT"/>
+  <vbox style="max-height: 100px;">
+    <vbox flex="1" style="overflow: scroll;">
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+      <description value="SCROLL"/>
+    </vbox>
+  </vbox>
+  <description value="FOOTER"/>
+</vbox>
+
+<vbox style="padding: 10px; width: 100px; background-color: #bbb;">
+  <description value="BEWARE"/>
+  <vbox flex="1" style="max-height: 100px; overflow: scroll;">
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+    <description value="SCROLL"/>
+  </vbox>
+  <description value="FOOTER"/>
+</vbox>
+
+</window>