overflow：外部div上的auto隐藏了内部div的box-shadow

Question

我有两个嵌套的<div>。外部的一个具有固定的尺寸和尺寸。内部调整内容的大小。内部div具有在外部div外部流血的盒子阴影。

请参阅JS fiddle。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在左侧示例中，这样可以正常工作，因为不需要滚动条。但是在右侧框中，我们需要一个滚动条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>