When clearing list of elements with nth-child CSS peudo element, the last element of each line is not dragabble

Do not know why, but when using these rules to clear elements each 4 elements, the last element of each line stay fix, not dragabble

.nbr-per-line-4 {
    width: 25%;
    float: left;
    &:nth-child(4n+1) {
        clear:left; // <---     if we comment this property, this will works
    }
}

    <div v-if="lookProductArray.length > 0" class="productListContainer">
        <draggable>
                    <div v-for="lookProduct in lookProductArray" class="product-card-wrapper nbr-per-line-4">
                        <product-card>
                           <!-- component content here -->
                      </product-card>
                    </div>
                <!-- </div> -->
        </draggable>
    </div>

[Lazac92]

@VernalVessel

Here is an example: https://jsfiddle.net/Lazac92/vn5qt15m/

It is working in firefox, but not in chrome or safari.

[Lazac92]

+1