diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 549907888b184..74638933f4463 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -269,15 +269,17 @@ function handleLoading(
           onLoadingComplete({ naturalWidth, naturalHeight })
         }
         if (process.env.NODE_ENV !== 'production') {
-          const parent = img.parentElement?.parentElement?.style
-          if (layout === 'responsive' && parent?.display === 'flex') {
-            console.warn(
-              `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
-            )
-          } else if (layout === 'fill' && parent?.position !== 'relative') {
-            console.warn(
-              `Image with src "${src}" may not render properly with a parent using position:"${parent?.position}". Consider changing the parent style to position:"relative" with a width and height.`
-            )
+          if (img.parentElement?.parentElement) {
+            const parent = getComputedStyle(img.parentElement.parentElement)
+            if (layout === 'responsive' && parent.display === 'flex') {
+              console.warn(
+                `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
+              )
+            } else if (layout === 'fill' && parent.position !== 'relative') {
+              console.warn(
+                `Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.`
+              )
+            }
           }
         }
       })
diff --git a/test/integration/image-component/default/pages/layout-responsive-inside-flex.js b/test/integration/image-component/default/pages/layout-responsive-inside-flex.js
index 923c9810cb174..e705801ca4966 100644
--- a/test/integration/image-component/default/pages/layout-responsive-inside-flex.js
+++ b/test/integration/image-component/default/pages/layout-responsive-inside-flex.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import Image from 'next/image'
 import img from '../public/test.jpg'
+import style from '../style.module.css'
 
 const Page = () => {
   return (
-    <div style={{ display: 'flex' }}>
+    <div className={style.displayFlex}>
       <Image id="img" layout="responsive" src={img} />
     </div>
   )
diff --git a/test/integration/image-component/default/style.module.css b/test/integration/image-component/default/style.module.css
new file mode 100644
index 0000000000000..dd2e06544348c
--- /dev/null
+++ b/test/integration/image-component/default/style.module.css
@@ -0,0 +1,3 @@
+.displayFlex {
+  display: flex;
+}