如何使 material design 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;
}

如何使 material design lite 卡片仅在 X 上可滚动且 imgs 溢出？

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

html

css

material-design-lite