Vue2 transition don't move on leave transition

Question

Vue2

If any element stores in the middle or end of list, then it'll move to the top on leaving. How to keep element on the place while leaving with current transition (scale) and without moving to the top?

Deleting position: absolute fixes that problem, but I need smooth move on replacements

...
<transition-group name="fade" tag="ul" class="list">
    <li
        v-for="notification in notifications"
        :key="notification.id"
        class="item"
    >
        {{ notification.id }}
    </li>
</transition-group>
...
.list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.item {
    transition: all 1s ease-in-out;
    border: 1px solid black;
    width: 50px;
}

.fade {
    &-enter {
        transform: translateY(100%);
        opacity: 0;
    }

    &-leave-to {
        scale: 0;
        transform: scale(0);
        opacity: 0;
    }

    &-leave-active {
        position: absolute;
        transition: all 0.5s ease-in-out;
    }
}

Answer 1

Okay, actually it was easy, I was stuck before.

Just change display: flex on display: inline-block