如何使材料设计lite卡仅在X上溢出imgs？

Question

我有这个网页，我试图制作标题为Online的卡在supporting-text区域滚动，但它尝试了各种失败，我尝试了很多CSS，如overflow:auto;和overflow:scroll;，但没有任何工作！

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; 
}