Can't seem to wrap carousel in flex box

[realesh]

I'm new here, just wanted the Center Mode to show in my single page web, I have followed the getting started guide and add the CDN to my html file, problem is i cant seem to wrap the carousel into my flexbox, just wanted to make it cleaner and style it

here is my flexbox container using styled-components

and my Carousel.js

[Harshmakadia]

Even I'm facing the same issue looks like the slider is not working when the parent has flex property. Not sure if there is the solution to this issue.

[yuwei-liang]

Right now I just set the container to be display: block.

[Harshmakadia]

@edwardfhsiao - If you wrap the component inside the container it will work <div class="container"><Slider Component/></div>

[DiegoVallejoDev]

I'm having the same issue, even if a far above parent is flex everything brokes

also seems to happen with display: grid parents

[HsuTing]

I have the same issue, and I think should we add width to the parentNode of <div className="slick-track" />?

The width of the child node will effect the layout of flex . However, the width of <div className="slick-track" /> is the total width of the children node, but we just need one of the children node`s width. Maybe add a width to the parentNode of <div className="slick-track" /> can fix this?

Do I make the sense?

[HsuTing]

I overwrite the width of <div class='slick-track' /> and <div class='slick-slide' /> with below patch:

patch-package
--- a/node_modules/react-slick/lib/track.js
+++ b/node_modules/react-slick/lib/track.js
@@ -113,7 +113,9 @@ var renderSlides = function renderSlides(spec) {
       className: (0, _classnames2.default)(slideClasses, slideClass),
       tabIndex: "-1",
       "aria-hidden": !slideClasses["slick-active"],
-      style: _extends({ outline: "none" }, child.props.style || {}, childStyle),
+      style: _extends({ outline: "none" }, child.props.style || {}, childStyle, {
+        width: `calc(100% / ${spec.children.length * 2 + 1})`,
+      }),
       onClick: function onClick(e) {
         child.props && child.props.onClick && child.props.onClick(e);
         if (spec.focusOnSelect) {
@@ -137,7 +139,9 @@ var renderSlides = function renderSlides(spec) {
           tabIndex: "-1",
           className: (0, _classnames2.default)(slideClasses, slideClass),
           "aria-hidden": !slideClasses["slick-active"],
-          style: _extends({}, child.props.style || {}, childStyle),
+          style: _extends({}, child.props.style || {}, childStyle, {
+            width: `calc(100% / ${spec.children.length * 2 + 1})`,
+          }),
           onClick: function onClick(e) {
             child.props && child.props.onClick && child.props.onClick(e);
             if (spec.focusOnSelect) {
@@ -159,7 +163,9 @@ var renderSlides = function renderSlides(spec) {
           tabIndex: "-1",
           className: (0, _classnames2.default)(slideClasses, slideClass),
           "aria-hidden": !slideClasses["slick-active"],
-          style: _extends({}, child.props.style || {}, childStyle),
+          style: _extends({}, child.props.style || {}, childStyle, {
+            width: `calc(100% / ${spec.children.length * 2 + 1})`,
+          }),
           onClick: function onClick(e) {
             child.props && child.props.onClick && child.props.onClick(e);
             if (spec.focusOnSelect) {
@@ -192,14 +198,15 @@ var Track = exports.Track = function (_React$PureComponent) {
     var _props = this.props,
         onMouseEnter = _props.onMouseEnter,
         onMouseOver = _props.onMouseOver,
-        onMouseLeave = _props.onMouseLeave;
+        onMouseLeave = _props.onMouseLeave,
+        trackStyle = _props.trackStyle;

     var mouseEvents = { onMouseEnter: onMouseEnter, onMouseOver: onMouseOver, onMouseLeave: onMouseLeave };
     return _react2.default.createElement(
       "div",
       _extends({
         className: "slick-track",
-        style: this.props.trackStyle
+        style: _extends({}, trackStyle, { width: `calc(100% * ${slides.length})` }),
       }, mouseEvents),
       slides
     );

This work under flex to me. Hope to help you.

[Gabriel-diez]

Setting { min-height: 0px; min-width: 0px; } on container fixed the issue for me.

[aclowwwn]

Having the same issue here, any solution would be highly appreciated. Thanks

[durdenx]

Setting { min-height: 0px; min-width: 0px; } on container fixed the issue for me.

Thanks! I've been looking for 3 hours....

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[im-amir]

Anyone still having this issue, just put * { min-height: 0; min-width: 0; } in the css file

[MarkPare]

I'm still having this issue and above solutions didn't work. Is it possible to use react slick when it has an ancestor that is display: flex?

[Vaisakhkm2625]

I'm still having this issue and above solutions didn't work. Is it possible to use react slick when it has an ancestor that is display: flex?

I also had same error and was looking for solution for a week now. but i found out that the property is getting there through some other class due to improper naming of class and namespaces.

Hope in future everyone reading this will double check every classes and use modules....

[hitchcliff]

i fixed it by setting height: 100%; width: 100%;

[IsidoroAros]

Late response but you can fix it by setting a wrapper for the slider

<div className='flex-container'>
  <> any other content </>
    **<div className='wrapper'>**
         <Slider {...props} />
    **<div />**
<div />

and your wrapper should have display: block; and width and height setted to 100%

[mshahzaib101]

for anyone facing this issue on slider child then try to wrap the child slide under the div like below:

[ozzytop]

I see this issue... is there a solution for it?

[cucharachaa]

Same issue here =(