Div CSS浮动切割轮廓或框阴影属性的右侧

Question

使用float-left属性在容器内显示某些divs时，我遇到一个奇怪的问题。最后一个是在应用outline或box-shadow属性时在右侧边缘进行切割。我在下面的图片上显示问题：

如果我将outline应用于其他div，则可以正常工作（请参见下图）。仅在最后一个显示时才发生这种情况。

我对每个容器（VOL.1，VOL.2，VOL.3）使用以下class：

.container_volume {
    float: left;
    width: 150px; height: 23vh;
    border: 1px solid #fff;
    margin: 10px 0 0 10px;
    background: #EDFF9E;    
}

这是用户选择div之一时应用的大纲代码：

outline: 5px solid #FF0004

有人知道为什么会这样吗？

编辑1

更具体地说，我使用的是简单的html：

<div class="content_desc_volumes scrollbar-dynamic">
    <div class="container_volume" id="container_volume_1"></div>
    <div class="container_volume" id="container_volume_2"></div>
    <div class="container_volume" id="container_volume_3"></div>
</div>

编辑2

这里是父容器（CSS）的content_desc_volumes：

.content_desc_volumes {
    float: left; width: 100%; 
    height: 26.3vh;         
    overflow: hidden; overflow-Y: scroll;
    border-top: 1px solid #000;         
    background: url(../img/bgConf2.jpg) #fff;   
    box-shadow: inset 0 0 40px #000     
}

PS：scrollbar-dynamic是我正在使用的jQuery插件的类。我已经尝试摆脱此类，但没有任何区别。