Make content of div scrollable

Question

I am using wordpress with woocommerce to create eshop. Woocommerce has part called mini-cart.php it is actual cart of customer. However I need this cart to be max 60% of height of whole site and I need content of cart to be scrollable. This would be easy but the second thing I need is to exclude buttons and total from scrolling. I have tried many ways but it never works. Here is code I use:

<div class="cart active">
  <div class="cart-wrapper">
    <h1 class="widget-title"> </h1><div class="widget_shopping_cart_content"><div class="cart-product-list">
    <ul class="cart_list product_list_widget ">
      <li><a href="http://autoflex.zone42.sk/obchod/2x-stabilizator-predna-naprava-porsche-911-od-09-1997/">
          <img src="http://autoflex.zone42.sk/wp-content/uploads/2013/10/2x-stabilizátor-predná-náprava-Porsche-Boxster-od-09.1996-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2x stabilizátor predná náprava Porsche 911 od: 09.1997" height="90" width="90">
                    2x stabilizátor predná náprava Porsche 911 od: 09.1997
          </a>
          <p class="quantity">1 × <span class="amount">50,90€</span></p>
     </li>
  </ul>
</div><!-- end product list -->    
<p class="total"><strong>Medzisúčet:</strong> <span class="amount">50,90€</span></p>  
    <div class="buttons">
        <a href="http://autoflex.zone42.sk/kosik/" class="button">
            <div class="cart-buttons">
                <div class="cart-buttons-padding">
                    Zobraziť košík →                </div>
            </div>
        </a>
        <a href="http://autoflex.zone42.sk/pokladna/" class="button checkout">
            <div class="cart-buttons">
                <div class="cart-buttons-padding">
                  pokladňa →                </div>
            </div>
        </a>
    </div>


</div>                

and here is CSS:

.cart.active{
    max-height: 60%;
    margin-bottom: -25px;

    transition: max-height .5s .2s;
    -ms-transition: max-height .5s .2s;
    -moz-transition: max-height .5s .2s;
    -webkit-transition: max-height .5s .2s;
}
div.facebook:hover, div.mail-us:hover, div.move-up:hover, div.cart-total.hoverOn:hover{
    right: 150px;
}
div.cart-total.hoverOn{
    transition: all .5s, width .5s .5s;
}
div.cart-total.hoverOff{
    transition: all .5s, width .2s;
    right: 150px;
    width: 279px;
}
.cart-product-list{
    overflow-y: auto;
}

so what should I do if I want only ul (cart_list) scrollable? and I also want the whole div name cart active to be max 60% height of whole site? Thanks in forward

Answer 1

ul.cart_list {
 overflow: scroll;
}