css - ドロップダウンが div の外にオーバーフローし、必要なだけ拡張できるようにする

Question

次のように、react select ライブラリと組み合わせて、react-multi-carousel ライブラリを使用しています。

import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

        <Carousel
          swipeable={false}
          draggable={false}
          showDots={true}
          responsive={responsive}
          ssr={true} // means to render carousel on server-side.
          infinite={true}
          autoPlaySpeed={1000}
          keyBoardControl={true}
          customTransition="all .5"
          transitionDuration={500}
          containerClass="carousel-container"
          removeArrowOnDeviceType={["tablet", "mobile"]}
          dotListClass="custom-dot-list-style"
          itemClass="carousel-item-padding-40-px"
          centerMode={true}
          renderDotsOutside={true}
          >
          {dmtfs.map((fl) => <div>{(ivrDests.length !== 0) && <StoryCarouselItem key={fl.value} dest_id={fl.value} ivr_dests={ivrDests} options={props.options} />}</div>)}

        </Carousel>

StoryCarouselItem のレンダリング:

  return (
    <div className="StoryCarouselItem">
        <div className="StoryCarouselItemCounter">
            <div className="StoryCarouselItemCounterText">
                {dtmf}
            </div>        
        </div>
        <div className="StoryCarouselItemName">
            {name}
        </div>
        <div className="StoryDropdown">
            <Select styles={customStyles} 
                    options={props.options} 
                    placeholder={IVRSound} 
                    value={selectedIVROption}
                    onChange={updateIVR}
            />
        </div>
    </div>

上記のコードは正常に動作し、以下に示すようにドロップダウンする前に見栄えがします。

カルーセル

ただし、ドロップダウンをクリックすると、div の外側にオーバーフローせず、他のセクションに溢れてドロップダウン全体が表示されます。代わりに、ドロップダウン内に引っ掛かり、少ししか表示されません。

例：

カルーセル 2

この変更に対応するためにスタイリングを変更する方法はありますか?

これが私が今持っている関連するスタイリングです：

.StorySelection{
    color: #392F5A;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 20px;
    margin-top: 5%;
}
.StoryCarousel{
    margin-top: 5%;
    padding-bottom: 10%;
    padding-left: 5%;
    padding-right: 5%;
}
.StoryCarouselBorder{
    background: #fff;
    border-style: solid;
    border-color: #ABABAB;
    border-width: 10px;
    padding-top: 2.3%;
    padding-bottom: 1.3%;
}
.StoryCarouselItem{
    height: 20%;
    width: 75%;
    margin-top: 5%;
    background: #392F5A;
}

.StoryCarouselItemCounter {

    margin-top: 10%;
    height: 60px;
    width: 60px;
    background-color: #EEC8E0;
    border-radius: 50%;
    display: inline-block;
}

.StoryCarouselItemCounterText{
    color: #fff;
    font-size: 24px;
    text-align: center;
    margin-top: 20%;
}

.StoryCarouselItemName {
    color: #fff;
    margin-top: 8%;
}
.StoryDropdown{
    padding-bottom: 10%;
    z-index: 20;
    overflow: visible;
}

.react-multi-carousel-dot-list {
    position: static !important;
    margin-top: 1% !important;
    margin-bottom: 0 !important;
}