React-slick: 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.

[edwardfhsiao]

hope there is a solution to fix this

[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?