帶邊框半徑和溢出隱藏的元素無法剪裁絕對位置不爲元素的直接子元素的內容

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一個工作演示