Коробка-тень и переполнение: прокрутка

Question

Я использую 3 панели ботстрапа с панельными заголовками col-md-4, внизу каждой панели у меня есть тень коробки, а панели имеют максимальную высоту 300 пикселей. Текст внутри панелей длиннее самих панелей. Я хотел бы использовать overflow: scroll для этого, но когда я использую overflow: scroll, он «перезаписывает» тень окна (из чего, я понимаю, почему). Я искал это, казалось бы, простое решение на некоторое время и ничего не придумал.

Я исключил стиль коробки-теней и две другие панели, чтобы держать его в чистоте внизу.

[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/ 

Answer 1

Попробуйте использовать overflow-y: auto;.

body, html { 
 
    margin: 10px; 
 
} 
 
.panel.panel-default.sub-content-panel { 
 
    max-height: 400px; 
 
    border-radius: 5px; 
 
    position: relative; 
 
    color: black; 
 
    overflow-y: auto; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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 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, experiencessible while work is in progress 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, experiencessible while work is in progress 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>