The responsive layout is incompatible with a Flexbox container

[kkomelin]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.16.1

What browser are you using?

Chrome

What operating system are you using?

Ubuntu 20.04.2 LTS

How are you deploying your application?

yarn start

Describe the Bug

Images with the responsive layout are not displayed on the page if put inside a flexbox container.

Expected Behavior

Responsive images should be visible.

To Reproduce

0. Create an app through:

npx create-next-app next-image-flexbox-bug
cd next-image-flexbox-bug

1. Create a Next page with the following code:

// pages/next-image-flexbox-bug.js
import Image from 'next/image';

export default function NextImageFlexboxBug() {
  return (
    <div style={{display: 'flex'}}>
      <Image
        src="/sunset1.jpg" 
        alt="Sunset" 
        width={600} 
        height={450} 
        layout="responsive"
      />
    </div>
  )
}

2. Run the server:

yarn dev

3. Open in Chrome:

http://localhost:3000/next-image-flexbox-bug

4. Nothing is displayed on the page (the white screen).

[kkomelin]

An update on this issue:
I tried setting display:grid for the container. It works, but if I add justify-content:center, it crashes the Image component in the same way.

[styfle]

This is a known issue for layout="responsive".

There's a proposal to add layout="flex-item" to solve this use case in #18637.

In the meantime, you can use a wrapper <div style={{ width: "100%" }}> around the image so that becomes the flex item.

import Image from "next/image";

export default function Home() {
  return (
    <div style={{ display: "flex" }}>
      <div style={{ width: "100%" }}>
        <Image
          src="/sunset1.jpg"
          alt="Sunset"
          width={600}
          height={450}
          layout="responsive"
        />
      </div>
    </div>
  );
}

https://codesandbox.io/s/determined-taussig-jjn9w?file=/pages/index.js

[kkomelin]

Thank you very much @styfle for your reply and the temporary solution you suggested.
Looking forward to a Next update with the new layout styles.

[kkomelin]

Tested with the latest 11.1.0. The bug still persists.

[styfle]

PR #28221 was released to the canary channel, it just prints a warning.

You can try it out with yarn add next@canary, thanks!

[kkomelin]

Thanks @styfle but, unfortunately, I don't see any related warnings in the browser or server console.

[styfle]

I tried the following code and removed the <div> wrapper hack and it prints a warning with next dev in Chrome: #27644 (comment)

Can you provide an example that doesn't print the warning?

[kkomelin]

Thanks @styfle,
Please find the bug-flexbox-wrapper branch of this example project https://github.com/kkomelin/nextjs-image-optimization-examples/tree/bug-flexbox-wrapper
You may run the project with yarn dev and then go to this example http://localhost:3000/responsive-images
The related styles are global and located here https://github.com/kkomelin/nextjs-image-optimization-examples/blob/bug-flexbox-wrapper/styles/globals.css#L27

[kkomelin]

JFYI, setting flex-direction: column; to the parent container fixes the issue but doesn't make the warning appear.

.container {
  display: flex;
  flex-direction: column;
}

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.