diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
index cd8a6d37b8eda06e2a14150e2981a609efb5a769..1b27c414abb93713c25054d43be1d895dc4cf626 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
@@ -23,7 +23,8 @@ export const QuestionVisualization = () => {
     onNavigateBack,
   } = useInteractiveQuestionContext();
 
-  const { height, ref, width } = useSdkElementSize();
+  const display = question?.card()?.display;
+  const { height, ref, width } = useSdkElementSize(display);
 
   if (isQuestionLoading) {
     return <SdkLoader />;
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx
index 9f66186dfb59ade26cba83a7d3a75dd788d35fb0..cac5d06f39a567729260bffa654cf7b9b9aee152 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx
@@ -1,13 +1,11 @@
 import cx from "classnames";
-import type { ReactElement, ReactNode } from "react";
-import { useState } from "react";
+import { type ReactElement, type ReactNode, useState } from "react";
 import { t } from "ttag";
 
 import {
   SdkError,
   SdkLoader,
 } from "embedding-sdk/components/private/PublicComponentWrapper";
-import { getDefaultVizHeight } from "embedding-sdk/lib/default-height";
 import CS from "metabase/css/core/index.css";
 import { Box, Flex, Group, Stack } from "metabase/ui";
 
@@ -73,9 +71,6 @@ export const InteractiveQuestionResult = ({
   const { question, queryResults, isQuestionLoading } =
     useInteractiveQuestionContext();
 
-  const card = question?.card();
-  const defaultHeight = card ? getDefaultVizHeight(card.display) : undefined;
-
   let content;
 
   if (isQuestionLoading) {
@@ -131,7 +126,7 @@ export const InteractiveQuestionResult = ({
   return (
     <Box
       className={cx(CS.flexFull, CS.fullWidth)}
-      h={height ?? defaultHeight}
+      h={height ?? "100%"}
       bg="var(--mb-color-bg-question)"
     >
       {content}
diff --git a/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts b/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts
index e986404f272568e2907d9259d7de5af1dd1cc183..0a26241a8a5051f8ca19b9654dc9c2646e799311 100644
--- a/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts
+++ b/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts
@@ -1,11 +1,13 @@
 import { useElementSize } from "@mantine/hooks";
 
-export const useSdkElementSize = () => {
+import { getDefaultVizHeight } from "embedding-sdk/lib/default-height";
+
+export const useSdkElementSize = (display?: string) => {
   const { height, ref, width } = useElementSize();
 
   // Some of our components by default don't have a specified height (i.e. the Visualization component)
   // and are rendering with a height of 0. This is a workaround to set a default height for those components.
-  const elementHeight = height || (width ? width / 9 : 500);
+  const elementHeight = height || (display && getDefaultVizHeight(display));
 
   return { height: elementHeight, ref, width };
 };