How to make material design lite card scrollable only on X with overflow of imgs?

Question

I have this page and i tried to make the card with title Online scrollable in the supporting-text area , but it fails with all kinds of tries , i tried many CSS like overflow:auto; and overflow:scroll; but nothing worked !

this is codepen link to try

:) any help ?

<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

Make the div scrollable changing the overflow value it has (hidden) to (auto):

.mdl-card {
  overflow:auto;
}