title: How to add vertical scrolling to reactstrap carousel slide content
body: <p>I want to add articles in this carousel, but when the content inside the slide exceeds the fixed length it looks like bellow.</p>
  
  <p><a href="https://i.stack.imgur.com/Gw8JN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gw8JN.png" alt="enter image description here"></a></p>
  
  <p>I have hardcoded the items for now.</p>
  
  <pre><code>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 = () =&gt; {
              if (animating) return;
              const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
              this.setState({
                  activeIndex:nextIndex
              })
              // setActiveIndex(nextIndex);
            }
  
            const previous = () =&gt; {
              if (animating) return;
              const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
              this.setState({
                  activeIndex:nextIndex
              })
              // setActiveIndex(nextIndex);
            }
  
            const goToIndex = (newIndex) =&gt; {
              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) =&gt; {
              return (
                  &lt;CarouselItem
                      onExiting={() =&gt; this.setState({ animating: false })}
                      onExited={() =&gt; this.setState({ animating: false })}
                      className="custom-tag"
                      tag="div"
                      key={item.id}
                  &gt;
                      {/* &lt;img src={item.src} alt={item.altText} /&gt; */}
                      &lt;CarouselCaption captionText={item.caption} captionHeader={item.caption} /&gt;
                  &lt;/CarouselItem&gt;
              );
            });
  
          return (
              &lt;div&gt;
                  &lt;Container className="themed-container"&gt;
                      &lt;Row xs="1" sm="2" md="2"&gt;
                          &lt;Col&gt;
                              &lt;div&gt;
                                  &lt;style&gt;
                                      {
                                          `.custom-tag {
                                              max-width: 100%;
                                              height: 500px;
                                              background: grey;
                                          }`
                                      }
                                  &lt;/style&gt;
                                  &lt;Carousel
                                      activeIndex={activeIndex}
                                      next={next}
                                      previous={previous}
                                  &gt;
                                      &lt;CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} /&gt;
                                      {slides}
                                      &lt;CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} /&gt;
                                      &lt;CarouselControl direction="next" directionText="Next" onClickHandler={next} /&gt;
                                  &lt;/Carousel&gt;
                              &lt;/div&gt;
  
                          &lt;/Col&gt;
                          &lt;Col&gt;
  
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                  &lt;/Container&gt;
              &lt;/div&gt;
          )
      }
  }
  Carousel.defaultProps = { 
      indicators: true, // default: true
      controls: true, // default: true
      autoPlay: false, 
      interval: false
  } 
  export default GeneratedComponent
  </code></pre>
  
  <p>The slide needs to be scrollable vertically to be able to view all the contents in the slide. And I'm not sure whether that's possible using reactstrap. Please suggest a workaround for this. Any help is appriciated.</p>