html - ボックスの影とオーバーフロー: スクロール

Question

パネル見出しを持つ 3 つのブートストラップ パネルを使用しcol-md-4ています。各パネルの下部にはボックス シャドウがあり、パネルの最大高は 300px です。パネル内のテキストは、パネル自体よりも長くなっています。overflow: scrollこれに使用したいのですが、使用するoverflow: scrollとボックスシャドウが「上書き」されます(その理由は理解しています)。この一見単純な解決策をしばらく探しましたが、何も思いつきませんでした。

ボックス シャドウ スタイルと他の 2 つのパネルを除外して、その下をきれいに保ちます。

    [Fiddle][1]

       .sub-content-panel {
        height: 400px;
        border-radius: 5px;
        position: relative;
        color: black;
        }

        <div class="col-md-4 text-border">
        <a href="gallery.php">
            <div class="panel panel-default sub-content-panel">
                <div class="panel-heading sub-content-panel-heading">
                    <p><i class="fa fa-commenting-o"></i>About us</p>
                </div>
                <div class="panel-body">
                    <p>with 35 years experience as a furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis contributes his knowledge of construction techniques and materials, experience in whole house renovations, and his skill in kitchen and bath remodels. Together our focus is on customer satisfaction, quality workmanship, attention to detail and inspired solutions. It is a priority for Naso Remodel to yield as little impact on the customers environment as possible while work is in progress.</p>
                </div>
            </div>
        </a>      
    </div>

   .sub-content-panel:before, .sub-content-panel:after{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    }

    .sub-content-panel:after{

    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
    }


  [1]: https://jsfiddle.net/2jufan88/