如何添加垂直滚动以反应带转盘幻灯片内容

Question

我想在此转盘中添加文章，但是当幻灯片中的内容超过固定长度时，它看起来像波纹管。

我现在已经对这些项目进行了硬编码。

import React, { Component } from 'react'
import { Container ,Row,Col,Carousel,
    CarouselItem,
    CarouselControl,
    CarouselIndicators,
    CarouselCaption} from 'reactstrap';

export class GeneratedComponent extends Component {
    constructor(props){
        super(props);
        this.state={
            activeIndex:0,
            animating:false,

        }
    }

    render() {
        let {animating,activeIndex}=this.state

        const next = () => {
            if (animating) return;
            const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
            this.setState({
                activeIndex:nextIndex
            })
            // setActiveIndex(nextIndex);
          }

          const previous = () => {
            if (animating) return;
            const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
            this.setState({
                activeIndex:nextIndex
            })
            // setActiveIndex(nextIndex);
          }

          const goToIndex = (newIndex) => {
            if (animating) return;
            this.setState({
                activeIndex:newIndex
            })
            // setActiveIndex(newIndex);
          }

        const items = [
            {
                id: 1,
                altText: 'Slide 1',
                caption: 'Slide 1 jghn kbn jk.bnm bkn/m cvgjhbknm.gchgvjhb.jn/jkvjbk cvkjlbhkjnkm cvhbjn cvghbkjnk cvjhbn cvbjn cvjhbkn vblnjkm vbhjknm cvbhn sxcvbsdfgj dgbhn tdfgh rfghj fghj esdfytugyhuj dfghkjl tydfghj dfghj dfghjkn tdfgyhj fghj rrdfghj rdtfgyh ccgvbhjn hbjkjnk gmhjvhbjn xchgvjhbknk etyfgvbhkjn zsxgcfhvb wretdryfugyiuh zrxtcvbh asdxcvgb zxcvb bjnkm lkfdj utd b gfdjytuyfughli sdrftyguhi 324w54e65r7t dxfcghvjb zxcvghbjn edfcvbhjn esrdftyg etrdytcfvbn lhkgjfhg yuktjydr stdryfgh xcfgvhbj zxcvbh j ytyuryr tdtfvbjn kblvjchxjgh xchvbn gfkhjg'
            },
            {
                id: 2,
                altText: 'Slide 2',
                caption: 'Slide 2'
            },
            {
                id: 3,
                altText: 'Slide 3',
                caption: 'Slide 3'
            }
        ];

          const slides = items.map((item) => {
            return (
                <CarouselItem
                    onExiting={() => this.setState({ animating: false })}
                    onExited={() => this.setState({ animating: false })}
                    className="custom-tag"
                    tag="div"
                    key={item.id}
                >
                    {/* <img src={item.src} alt={item.altText} /> */}
                    <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
                </CarouselItem>
            );
          });

        return (
            <div>
                <Container className="themed-container">
                    <Row xs="1" sm="2" md="2">
                        <Col>
                            <div>
                                <style>
                                    {
                                        `.custom-tag {
                                            max-width: 100%;
                                            height: 500px;
                                            background: grey;
                                        }`
                                    }
                                </style>
                                <Carousel
                                    activeIndex={activeIndex}
                                    next={next}
                                    previous={previous}
                                >
                                    <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
                                    {slides}
                                    <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
                                    <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
                                </Carousel>
                            </div>

                        </Col>
                        <Col>

                        </Col>
                    </Row>
                </Container>
            </div>
        )
    }
}
Carousel.defaultProps = { 
    indicators: true, // default: true
    controls: true, // default: true
    autoPlay: false, 
    interval: false
} 
export default GeneratedComponent

幻灯片需要垂直滚动，才能查看幻灯片中的所有内容。而且我不确定使用reactstrap是否可能。请为此提出解决方法。任何帮助都可以申请。