Responsiveness breaks when parent has `display: flex`
See original GitHub issueIt’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.
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You nested a flex container inside another flex container in your example. It will work properly if you remove the
div
that is wrapping theCarousel
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 setmin-width
to some value rather thanauto
in the inner flex container.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