diff --git a/canvas_modules/common-canvas/src/palette/palette-flyout-content.jsx b/canvas_modules/common-canvas/src/palette/palette-flyout-content.jsx
index c7c7be4b7..d461cb541 100644
--- a/canvas_modules/common-canvas/src/palette/palette-flyout-content.jsx
+++ b/canvas_modules/common-canvas/src/palette/palette-flyout-content.jsx
@@ -145,8 +145,11 @@ class PaletteFlyoutContent extends React.Component {
 			? this.props.paletteHeader
 			: null;
 
+		let className = "palette-flyout-content";
+		className += paletteHeader ? " with-palette-header" : "";
+
 		return (
-			<div className="palette-flyout-content">
+			<div className={className}>
 				{contentSearch}
 				{paletteHeader}
 				{contentCategories}
diff --git a/canvas_modules/common-canvas/src/palette/palette.scss b/canvas_modules/common-canvas/src/palette/palette.scss
index 185c67cd3..9d55bac2f 100644
--- a/canvas_modules/common-canvas/src/palette/palette.scss
+++ b/canvas_modules/common-canvas/src/palette/palette.scss
@@ -57,11 +57,17 @@ $palette-dialog-list-item-height: 46px;
 	height: 100%;
 }
 
+// Overrides the grid-template-rows for when a palette header object is
+// included. (This fixes a problem specifically on Safari.)
+.palette-flyout-content.with-palette-header {
+	grid-template-rows: $palette-search-container-height auto 1fr;
+}
+
 .palette-flyout-content {
 	position: absolute; // Needed to allow the scroll of categories/nodes to work.
 	height: 100%;
 	display: grid;
-	grid-template-rows: $palette-search-container-height auto 1fr;
+	grid-template-rows: $palette-search-container-height 1fr;
 	// grid-template-columns is set based on narrow or open palette
 
 	.palette-scroll {