在div中显示元素，如果元素太多则滚动y

Question

我正在使用自举轮播，并且我希望将指示器放置在右侧（一个第6列用于幻灯片本身，一个第6列充满指示器+滚动y，如果它们太多）。目前，我已经完成指标的放置，但是它们滚动了x方向。如果他们到达行尾，我希望他们跳到新行，而不是滚动x轴。

http://prntscr.com/l20xrw

.carousel-indicators {
   margin: 10px 0 0;
    overflow: scroll;
    position: static;
    text-align: left;
/*    white-space: nowrap;*/
/*    width: 100%;*/
}
.carousel-indicators > li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
/*    display: block;*/
    height: auto;
    margin: 0 !important;
    width: auto;
}

.carousel-indicators > li > img {
   display: block;
    opacity: 0.5;
}

/*
.carousel-indicators li.active img {
    opacity: 1;
}
*/
.carousel-indicators li:hover img {
    opacity: 0.75;
}

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="http://placehold.it/400x200&text=slide1" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="http://placehold.it/400x200&text=slide2" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="http://placehold.it/400x200&text=slide3" alt="Third slide">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <ol class='carousel-indicators'>
                    <li data-target='#carouselExampleIndicators' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li>
                    <li data-target='#carouselExampleIndicators' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li>
                    <li data-target='#carouselExampleIndicators' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
                    <li data-target='#carouselExampleIndicators' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
                    <li data-target='#carouselExampleIndicators' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
                    <li data-target='#carouselExampleIndicators' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
                    <li data-target='#carouselExampleIndicators' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
                    
                </ol>

            </div>
        </div>
    </div>