docs: add note for Image responsive layout (#25915)

With the default Next.js template project, the .main and .container divs have `display: flex` style rule. However, as commented in [this issue](#18489 (comment)), if may not display properly an <Image /> placed as direct child.



## Documentation / Examples

- [x] Make sure the linting passes

docs/api-reference/next/image.md

@@ -100,6 +100,7 @@ but maintain the original dimensions for larger viewports.
 
 When `responsive`, the image will scale the dimensions down for smaller
 viewports and scale up for larger viewports.
+Note: the responsive layout may not work correctly if the parent element uses a display value other than `block` such as `display: flex` or `display: grid`.
 
 When `fill`, the image will stretch both width and height to the dimensions of
 the parent element, provided the parent element is relative. This is usually paired with the [`objectFit`](#objectFit) property.