imgsのオーバーフローでX上でのみスクロール可能なマテリアルデザインライトカードを作る方法は？

Question

私はこのページを持っていて、supporting-textの領域にスクロール可能なタイトルOnlineでカードを作ろうとしましたが、すべての種類の試行で失敗します。overflow:auto;とoverflow:scroll;のような多くのCSSを試しましたが、

this is codepen link to try

:)任意のヘルプ？

<style> 
.repero.mdl-card { 
    width: 500px; 
    opacity: 0.6; 
    min-height: 150px; 
    max-height: 200px; 
    margin-bottom: 20px; 
} 

.middLoading.mdl-spinner { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 


</style> 

<div class="mdl-grid"> 

<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--5-col 
mdl-button--colored mdl-color--lime-400"> 

    <div class="mdl-card__title"> 
     <h2 class="mdl-card__title-text">Dashboard</h2> 
    </div> 


    <div id="dashboard" class="mdl-card__supporting-text scrollable" 
    style="height: 400px; overflow-y: hidden"> 

     <div id="loaderDash" class="mdl-spinner 
    mdl-spinner--single-color mdl-js-spinner is-active middLoading" 
      style="display: block"></div> 

    </div> 


</div> 


<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--7-col"> 

    <div class="mdl-card__title"> 
     <h2 class="mdl-card__title-text">NEWS</h2> 
    </div> 

    <div class="mdl-card__supporting-text scrollable"  
     style="height:400px"> 


    </div> 


</div> 




<div class="mdl-card mdl-shadow--6dp mdl-cell mdl-cell--12-col mdl-  button--colored mdl-color--orange"> 

    <div class="mdl-card__title"> 
     <h2 class="mdl-card__title-text">Online-Chat</h2> 
    </div> 

    <div class="mdl-card__supporting-text scrollable" 
     style=" overflow :auto; height: 10em;width: 150em; max-width: 150em"> 


     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
       alt="img" style="width: 112px;height: 112px"> 

      <img src="http://placehold.it/112x112/DC143C/FFFFFF"> 

     </button> 

    </div> 

    </div> 


</div> 
<script> 
    $('.scrollable').on('mousewheel DOMMouseScroll', function (e) { 
    var e0 = e.originalEvent, 
     delta = e0.wheelDelta || -e0.detail; 

    this.scrollTop += (delta < 0 ? 1 : -1) * 30; 
    e.preventDefault(); 
    }); 
    </script> 

Answer 1

（オート）には（隠れて）いるオーバーフロー値を変更するスクロールのdivください：

.mdl-card { 
    overflow:auto; 
}