--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -1020,17 +1020,16 @@ extends="chrome://global/content/binding
       <xul:richlistbox anonid="richlistbox" class="autocomplete-richlistbox" flex="1"/>
       <xul:hbox>
         <children/>
       </xul:hbox>
     </content>
 
     <implementation implements="nsIAutoCompletePopup">
       <field name="_currentIndex">0</field>
-      <field name="_rowHeight">0</field>
       <field name="_rlbAnimated">false</field>
 
       <!-- =================== nsIAutoCompletePopup =================== -->
 
       <property name="selectedIndex"
                 onget="return this.richlistbox.selectedIndex;">
         <setter>
           <![CDATA[
@@ -1160,36 +1159,40 @@ extends="chrome://global/content/binding
           let rows = this.richlistbox.childNodes;
           let numRows = Math.min(this._matchCount, this.maxRows, rows.length);
 
           this.removeAttribute("height");
 
           // Default the height to 0 if we have no rows to show
           let height = 0;
           if (numRows) {
-            if (!this._rowHeight) {
-              let firstRowRect = rows[0].getBoundingClientRect();
-              this._rowHeight = firstRowRect.height;
-
+            let firstRowRect = rows[0].getBoundingClientRect();
+            if (this._rlbPadding == undefined) {
               let style = window.getComputedStyle(this.richlistbox);
 
               let transition = style.transitionProperty;
               this._rlbAnimated = transition && transition != "none";
 
               let paddingTop = parseInt(style.paddingTop) || 0;
               let paddingBottom = parseInt(style.paddingBottom) || 0;
               this._rlbPadding = paddingTop + paddingBottom;
-
-              // Set a fixed max-height to avoid flicker when growing the panel.
-              this.richlistbox.style.maxHeight =
-                ((this._rowHeight * this.maxRows) + this._rlbPadding) + "px";
             }
 
+            if (numRows > this.maxRows) {
+              // Set a fixed max-height to avoid flicker when growing the panel.
+              let lastVisibleRowRect = rows[this.maxRows - 1].getBoundingClientRect();
+              let visibleHeight = lastVisibleRowRect.bottom - firstRowRect.top;
+              this.richlistbox.style.maxHeight =
+                visibleHeight + this._rlbPadding + "px";
+            }
+
+            let lastRowRect = rows[numRows - 1].getBoundingClientRect();
             // Calculate the height to have the first row to last row shown
-            height = (this._rowHeight * numRows) + this._rlbPadding;
+            height = lastRowRect.bottom - firstRowRect.top +
+                     this._rlbPadding;
           }
 
           let animate = this._rlbAnimated &&
                         this.getAttribute("dontanimate") != "true";
           let currentHeight = this.richlistbox.getBoundingClientRect().height;
           if (height > currentHeight) {
             // Grow immediately.
             if (animate) {