Html 具有相同高度的侧边栏的引导转盘

嗨，我用bootstrap和wordpress创建了我的第一个网站，但我被困在了这个网站上，请查看下面的照片。如何使旋转木马和侧边栏的大小相同

我已经为边栏的高度做了100%高度或100vh边栏的等级是主目录，谢谢

<div class="col-md-12 main-head">

<div class="col-md-9 main-slider">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Chania">
        </div>

        <div class="item">
          <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Chania">
        </div>

        <div class="item">
          <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Flower">
        </div>

        <div class="item">
          <img src="http://localhost/wordpress/wp-content/uploads/2016/10/1.jpg" alt="Flower">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>

<div class="col-md-3 main-catalog">
    <h3 class="h3-catalog"> Products Catalog </h3>  

    <ul class="main-categories"> 
        <li>Home & Living </li>
        <li> Limited Edition </li>
        <li> Satelite Connection</li>
        <li> Clothing </li>
        <li> Accessories</li>
        <li> Food </li>
        <li> Bags </li>
        <li> Travels </li>

    </ul>
</div>

</div>

产品目录

家庭与生活
限量版
卫星连接
服装
配件
食物
袋子
旅行

使用flexbox

使用flexbox

main-catalog {
  background: orange;
  display: flex;
  flex-flow: column wrap;
}

.main-categories {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  flex-grow: 1;
}

.main-head {
  display: flex;
}