Я нашел ошибку? Конфликты максимальной и минимальной ширины с переходом ⇐ CSS

[Anonymous]

Когда я навожу указатель мыши на элемент .item, он красиво расширяется. Но когда я покидаю элемент .item, перед началом перехода возникает заметная пауза. После долгих усилий по устранению неполадок я сузил его до этой строки кода:

Код: Выделить всё

  max-width: 50%;

Появляется сообщение, когда я настраиваю его так, чтобы элемент .item не мог превышать более 50 %, это приводит к ошибке, при которой переход ненадолго приостанавливается перед выполнением. Я поэкспериментировал, удалив максимальную ширину — анимация стала гладкой. Я вставил его обратно, а затем удалил переход; вообще никакой паузы. Пауза вводится только тогда, когда они вместе. Я попытался установить максимальную ширину на определенное число (максимальная ширина: 600 пикселей;) - тот же результат. Выключил его с минимальной шириной, результат тот же. Зачем им ругаться друг с другом?
Это код:

Код: Выделить всё

body {
background-color: #fff;
}

.container {
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}

.item {
flex: 1;
position: relative;
margin: 10px;
height: 558px;
border-radius: 15px;
align-items: center;
justify-content: center;
display: flex;
overflow: hidden;
transition: flex 0.6s cubic-bezier(0.77, 0, 0.175, 1);
max-width: 50%;
}

.item:hover {
flex-grow: 10;
}

video {
height: 100%;
position: absolute;
z-index: 0;
min-width: 100%;
object-fit: cover;
}

Код: Выделить всё

Document

Подробнее здесь: https://stackoverflow.com/questions/781 ... transition