带边框半径和溢出隐藏的元素无法剪裁绝对位置不为元素的直接子元素的内容

Question

在Chrome 60.0.3112.90（64位）中。 我的系统是macOS 10.12.4

正如您所看到的，蓝色方块溢出。我怎么解决这个问题？为什么会溢出？

请检查该JSFiddle

或者这是我的代码。

.outer { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 10px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    overflow: hidden; 
 
} 
 

 
.inner { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    overflow: scroll; 
 
    background-color: lightblue; 
 
} 
 

 
.inner2 { 
 
    width: 200px; 
 
    height: 400px; 
 
    background-color: lightgray; 
 
} 
 

 
.inner3 { 
 
    width: 200px; 
 
    height: 100px; 
 
    position: absolute; 
 
    background-color: blue; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="inner2"> 
 
     <div class="inner3"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您可以申请z-index: 1到.outer CSS类。 您也可以尝试this解决方案，它被其他人使用了很多。

你有here一个工作演示