Box-shadow and overflow: scroll

Question

I am using 3 bootstrap panels with panel headings col-md-4, at the bottom of each panel I have box-shadow and the panels have a max height of 300px. The text inside the panels is longer than the panels themselves. I would like to use overflow: scroll for this but when I use overflow: scroll it "overwrites" the box-shadow (of which, I understand why). I have searched for this seemingly simple solution for a while and have come up with nothing.

I have excluded the box-shadow style and the other two panels to keep it clean underneath.

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

First thing I'd think of (without seeing the complete code) would be to use `inset` box-shadow. — Shikkediel, Oct 03 '15 at 06:23
If its possible I would like the box-shadow on the outside of the box. Ive added the other code. Thanks https://jsfiddle.net/jasonnaso/2jufan88/2/ — Jason, Oct 03 '15 at 06:32

score 0 · Answer 1 · answered Oct 03 '15 at 06:38

Try using 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>

Box-shadow and overflow: scroll

1 Answers1