css - 溢出 :auto on outer div hides box-shadow of inner div

Question

我有两个嵌套的 <div>秒。外层有固定尺寸，内层根据内容大小调整。内部 div 具有在外部 div 之外流血的框阴影。

引用JS fiddle .

.outer {
  position: fixed;
  background-color: #fef1f1;
}
.inner {
  width: 100%;
  background-color: #f1f1fe;
  box-shadow: 2px 5px 8px rgba(255, 0, 0, 1);
  -moz-box-shadow: 2px 5px 8px rgba(255, 0, 0, 1);
  -webkit-box-shadow: 2px 5px 8px rgba(255, 0, 0, 1);
  border-radius: 10px;
}
#outer1 {
  left: 100px;
  top: 100px;
  width: 200px;
  height: 150px;
}
#outer2 {
  left: 400px;
  top: 100px;
}
#inner2 {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

<div id="outer1" class="outer">
  <div id="inner1" class="inner">
    Not much stuff<br />to need a<br />scrollbar
  </div>
</div>
<div id="outer2" class="outer">
  <div id="inner2" class="inner">
    Lots of stuff<br />stuff<br />stuff<br />stuff<br />stuff
    <br />stuff<br />stuff<br />stuff<br />stuff<br />stuff
  </div>
</div>

在左边的例子中，这工作正常，因为不需要滚动条。但是在右边的框中，我们需要一个滚动条 overflow-y:scroll|auto这挡住了阴影。如何同时显示滚动条和阴影？

Answer 1

将溢出设置到内部容器而不是外部容器，并添加 max-height: 100%

.outer {
  position: fixed;
  top: 20px;
  left: 20px;
  height: 150px;
  width: 200px;
  background-color: #fef1f1;
}
.outer + .outer {
  left: 250px;
}
.inner {
  max-height: 100%;
  overflow-y:auto;
  background-color: #f1f1fe;
  box-shadow: 2px 5px 8px rgba(255, 0, 0, 1);
  -moz-box-shadow: 2px 5px 8px rgba(255, 0, 0, 1);
  -webkit-box-shadow: 2px 5px 8px rgba(255, 0, 0, 1);
  border-radius: 10px;
}

<div class="outer">
  <div class="inner">
    Not much stuff<br />to need a<br />scrollbar
  </div>
</div>
<div class="outer">
  <div class="inner">
    Lots of stuff<br />stuff<br />stuff<br />stuff<br />stuff
    <br />stuff<br />stuff<br />stuff<br />stuff<br />stuff
  </div>
</div>