Div CSS float обрезает правую часть контура или свойства box-shadow

Question

Я сталкиваюсь со странной проблемой при использовании свойства float-left для отображения некоторого divs внутри контейнера.Последний обрезает правый край для свойства outline или box-shadow при применении.Я показываю проблему на картинке ниже:

, если я применяю outline в любом другом div, он работает нормально (см. изображение ниже).Это происходит только для последнего показанного.

Я использую следующие class для каждого контейнера (ТОМ 1, ТОМ 2, ТОМ 3):

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

И вот код схемы, который применяется, когда пользователь выбирает один из элементов:

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, который я использую.Я уже пытался избавиться от этого класса, но без разницы.