Auto height issue

Description

How to make the slider responsive with auto height?

I have a dynamic content inside the slider. There might be slides with different height. if the content is very high I don’t see part of the content. My slider is in the Dialog. Code looks like:

const flicking = React.useRef(null);

React.useEffect(() => {
    if (flicking.current) {
      flicking.current.resize();  //Seems it doesn't help also
    }
}, [props.slots]);

return (
  <Flicking
        style={{height: "100%"}} //without that style I don't see content at all
        gap={20}
        bound
        ref={flicking}
        lastIndex={60}
        infinite
        infiniteThreshold={400}
        onNeedPanel={handleNeedPanel}
        resizeOnContentsReady
      >
          {props.slots.map(slot => <div style={{width: 'calc(33% - 13px)'}}>some high content</div>)}
  </Flicking>
)

As you can see on the screenshot, there is not any scrollbar and part of the content is just hidden

is there any ideas how it could be improved?

[WoodNeck]

Looks like it’s a bug of Flicking that occurs when there’re no panels but added after like you’ve said. I’ll fix this after, thanks for reporting!

[matiosfree]

@WoodNeck Yeah, it works for me now. Awesome work. Thanks 😃