question-mark
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.

Responsiveness breaks when parent has `display: flex`

See original GitHub issue

It’s all in the title pretty much 😃

Here’s a demo: https://codesandbox.io/s/morning-thunder-hcdl5

Make the preview smaller and pretty soon you’ll see the carousel stop being responsive and instead causing a horizontal scrollbar.

Is this something that should be fixed in this component, and/or is there a way I can work around it in my own code? (While still keeping display: flex of course)

Here’s a screenshot. That horizontal scrollbar should not be there, there is plenty of room left for the carousel to shrink to fit.

image

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
renancleyson-devcommented, Mar 7, 2021

You nested a flex container inside another flex container in your example. It will work properly if you remove the div that is wrapping the Carousel component or the one that is wrapping the sidebar and carousel, but if you want it as it is in your example, then you are handling the same problem of the issue. So you need to set min-width to some value rather than auto in the inner flex container.

1reaction
renancleyson-devcommented, Jan 27, 2021

The problem is that at some point the carousel as a flex item will shrink to its minimum content size, which is the carousel items content without any free space, so adding a lot of items will make the carousel larger, and eventually, it will break the responsiveness. This explains why adding the infiniteLoop flag breaks the carousel since it renders clones of the last and first item inside the carousel.

The solution is changing the minimum width to 0 instead of the minimum content size(auto) in the outer div of the component. Here’s an example of how you can do it: https://codesandbox.io/s/sleepy-greider-64ed2?file=/src/index.css

Read more comments on GitHub >

github_iconTop Results From Across the Web

Improve Responsiveness with flex-wrap in CSS
The flex-wrap property is a quick way to make parent elements more responsive on various screen sizes. As with flexbox in general, ...
Read more >
Flexbox breaks bootstrap responsiveness
In order to properly space the adjacent column I have used nested flex boxes. This works fine on main break point but as...
Read more >
Mastering wrapping of flex items - CSS: Cascading Style Sheets
This means that if you have a set of flex items that are too wide for their container, they will overflow it. If...
Read more >
Grid system · Bootstrap v4.6
It's built with flexbox and is fully responsive. ... Those columns are centered in the page with the parent .container . Breaking it...
Read more >
Layout and Grid System | Components
It's built with flexbox and is fully responsive. ... Those columns are centered in the page with the parent .container . Breaking it...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found