Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The responsive layout is incompatible with a Flexbox container

See original GitHub issue

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

Create an app through:

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

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>
  )
}

Run the server:

yarn dev

Open in Chrome:

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

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

Issue Analytics

State:
Created 2 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

kkomelincommented, Aug 25, 2021

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

1reaction

styflecommented, Aug 5, 2021

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