allowing dropdown to overflow outside of div and extend as far as it needs

Question

I am using the react-multi-carousel library in conjuction with the react select library like this:

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 rendering:

  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>

The code above works fine and looks good before dropping down as you can see below:

Carousel

However, when I click the dropdown, it does not overflow outside of the div and spill into other sections to reveal the whole dropdown like I want it to. Instead, it gets caught within the dropdown and only shows a little bit.

Example:

Carousel 2

Any idea how I can change the styling to accommodate this change?

Here's the relevant styling I have right now:

.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;
}

Answer 1

Use the menuPortalTaget prop to portal the menu. This will allow it to overflow outside of the div. Other than that you may require a custom MenuList component to adjust the listing styling.