如何使材料设计的板卡只在X上滚动和溢出的imgs？

Question

我有这个页面，我试着让标题为Online的卡片在supporting-text区域滚动，但是尝试失败了，我尝试了很多overflow:auto;和overflow:scroll;之类的CSS，但是都没有效果！

这是代码链接来尝试

)有什么帮助吗？

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