Carousel sometimes overflows horizontally

[ivan-kleshnin]

Bug is related to

• [x] embla-carousel (core package)
• [x] embla-carousel-react

Embla Carousel version

• ^7.0.0-rc05

Describe the bug

Carousel sometimes overflows horizontally if the number of slides >= 3.

It's hard to describe with words so I've made a video description.

GithubRepo

• https://github.com/ivan-kleshnin/embla-carousel-bug (with steps to reproduce)

Expected behavior

Correct width. I'm not 100% sure that it's really an E.C. bug – sorry if I've missed some CSS rule or a config option. I swear I spent some time debugging the problem and checking with docs before posting this 🙏

[davidjerleke]

Hi @ivan-kleshnin,

Thank you for testing the release candidate. It seems like your CSS isn't quite correct. The content is overflowing because you're not telling your flex boxes to wrap its content. Try this:

There might be other problems too but I only had 5 minutes to check this out for now. One way to debug is to totally disable the Embla script and get the CSS working. And when the CSS is playing ball you can add the Embla script back again.

Let me know how it goes!

Best, David

[ivan-kleshnin]

@davidjerleke thank you for the response! Now I see that it's really a CSS issue as it persists when I disable Embla. Still, it's a bit relevant to the library as the behavior boils down to the following lines (IMO):

<Box
  flexShrink="0"
  flexBasis="100%"
  height="100%"
>
  ...
</Box>

which are copy-pasted from the docs.

As screen width passes a certain point, the card refuses to shrink further.

I've tried different combinations of flexBasis and flexShrink – no progress so far.

[davidjerleke]

Hi @ivan-kleshnin,

So I got more time to look into your problem.

Still, it's a bit relevant to the library as the behavior boils down to the following lines (IMO):

I would say not relevant. Because it turns out that this has nothing to do with Embla at all but the problem is rather caused by a faulty grid declaration. I didn't have the permissions to push a branch with the fix to your repository so I'm going to show you how to solve it:

Go to the following file in your repository and change the following:

import { Grid } from "@chakra-ui/react";
import Head from "next/head";
import * as React from "react";
import { MainMenu } from "./MainMenu";
import { Footer } from "./Footer";

// Layout
export function Layout({ children }) {
  return (
    <>
      <Grid
        templateRows="auto 1fr auto"
        minHeight="100vh"
        gridAutoColumns="100%" // <-- Add this
      >
        {/*<MainMenu/>*/}
        <div>Menu</div>
        {children}
        {/*<Footer/>*/}
        <div>Footer</div>
      </Grid>
    </>
  );
}

Embla carousel is quite different from other carousel libraries because it lets you use any CSS you want. It only reads your slide positions when it initializes. Many carousel libraries out there add all sorts of styles to your slides like position: absolute; and so on which can be convenient yes. But they often come with bigger bundle sizes and don't give you full control over your markup like Embla does. This "freedom" Embla gives you with the CSS makes it possible for users to write CSS that causes problems. The Embla docs can't cover all possible combinations of CSS that could lead to problems. It only shows you a minimal setup example and you'll have to get your CSS right from there. Having said that, I'm always open to suggestions about documentation improvements.

This can be hard to grasp at first for users coming from other carousel libraries to Embla. One thing to note is that when you're having issues with items overflowing or not being positioned correctly, almost 10 out of 10 cases will be because the CSS isn't setup correctly.

which are copy-pasted from the docs.

<Box
  flexShrink="0"
  flexBasis="100%"
  height="100%"
>
  ...
</Box>

This isn't copy pasted from the docs? It should be like this guide shows:

<Box
  flexShrink="0"
  flexGrow="0"
  flexBasis="100%"
  height="100%"
>
  ...
</Box>

// or

<Box
  flex="0 0 100%"
  height="100%"
>
  ...
</Box>

I hope this helps.

Best, David

[ivan-kleshnin]

Thank you David 🤝 You've basically nailed it so I have little to add! autoColumns=100% was the missing link. I really appreciate the time you've put into this mini-research and I hope this thread will help other people with similar issues.

[davidjerleke]

No worries. Good luck and have a nice one 🙂.