css - 允许下拉菜单溢出 div 并根据需要扩展

问题描述

我将 react-multi-carousel 库与 react-select 库结合使用，如下所示：

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

标签： cssreactjsoverflowreact-selectreact-multi-carousel

css - 允许下拉菜单溢出 div 并根据需要扩展

问题描述

解决方案

推荐阅读