diff --git a/empress/support_files/css/empress.css b/empress/support_files/css/empress.css
index 80543faec..a62be755d 100644
--- a/empress/support_files/css/empress.css
+++ b/empress/support_files/css/empress.css
@@ -594,6 +594,12 @@ p.side-header button:hover,
 
 /* The legend is resizable, thanks to resize: both; and overflow: auto.
  * See https://stackoverflow.com/a/61976603/10730311.
+ *
+ * The 0.1px bottom padding prevents an unnecessary vertical scrollbar
+ * that kept showing up when setting the legend's width/height back to
+ * their defaults ("") in empress.js. It seems like having a tiny bit
+ * of extra vertical space is needed to get rid of this. It's barely
+ * visible to the user so it shouldn't be a problem.
  */
 #legend-main {
     margin: 20px;
@@ -601,6 +607,7 @@ p.side-header button:hover,
     max-width: 33vw;
     min-height: 30px;
     max-height: 85vh;
+    padding-bottom: 0.1px;
     resize: both;
     overflow: auto;
     background-color: rgba(255, 255, 255, 0.5);
diff --git a/empress/support_files/js/empress.js b/empress/support_files/js/empress.js
index 4105bce38..873b6ae16 100644
--- a/empress/support_files/js/empress.js
+++ b/empress/support_files/js/empress.js
@@ -2620,6 +2620,20 @@ define([
         this._legend.clear();
     };
 
+    /**
+     * Set the #legend-main width and height back to their defaults.
+     *
+     * This allows the legend to be resized back to whatever the default
+     * size will be, since manually resizing the legend sets a fixed
+     * width/height value.
+     */
+    Empress.prototype.resizeLegend = function () {
+        // Setting CSS properties to "" causes the default values to be used:
+        // see https://stackoverflow.com/a/21457941.
+        document.getElementById("legend-main").style.width = "";
+        document.getElementById("legend-main").style.height = "";
+    };
+
     /**
      * Updates the legend based on a categorical color key.
      *
@@ -2633,6 +2647,7 @@ define([
      *                         color, expressed in hex format.
      */
     Empress.prototype.updateLegendCategorical = function (name, keyInfo) {
+        this.resizeLegend();
         this._legend.addCategoricalKey(name, keyInfo);
     };