title: Make content of div scrollable
body: <p>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:</p>
  
  <pre><code>&lt;div class="cart active"&gt;
    &lt;div class="cart-wrapper"&gt;
      &lt;h1 class="widget-title"&gt; &lt;/h1&gt;&lt;div class="widget_shopping_cart_content"&gt;&lt;div class="cart-product-list"&gt;
      &lt;ul class="cart_list product_list_widget "&gt;
        &lt;li&gt;&lt;a href="http://autoflex.zone42.sk/obchod/2x-stabilizator-predna-naprava-porsche-911-od-09-1997/"&gt;
            &lt;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"&gt;
                      2x stabilizátor predná náprava Porsche 911 od: 09.1997
            &lt;/a&gt;
            &lt;p class="quantity"&gt;1 × &lt;span class="amount"&gt;50,90€&lt;/span&gt;&lt;/p&gt;
       &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- end product list --&gt;    
  &lt;p class="total"&gt;&lt;strong&gt;Medzisúčet:&lt;/strong&gt; &lt;span class="amount"&gt;50,90€&lt;/span&gt;&lt;/p&gt;  
      &lt;div class="buttons"&gt;
          &lt;a href="http://autoflex.zone42.sk/kosik/" class="button"&gt;
              &lt;div class="cart-buttons"&gt;
                  &lt;div class="cart-buttons-padding"&gt;
                      Zobraziť košík →                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;
          &lt;a href="http://autoflex.zone42.sk/pokladna/" class="button checkout"&gt;
              &lt;div class="cart-buttons"&gt;
                  &lt;div class="cart-buttons-padding"&gt;
                    pokladňa →                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;                
  </code></pre>
  
  <p>
  </p>
  
  <p>and here is CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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</p>