Max-Width/Min-Width与transition冲突致过渡延迟？求解析

当鼠标悬停在.item元素上时展开动画流畅，但移出时，transition触发前有明显延迟。排查发现是max-width: 50%导致的——移除该属性或transition后问题消失，换成固定值max-width:600px或min-width问题依旧，请问两者为何冲突？

复现代码 #

CSS #

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;
}

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="item">
            <video class="thevideo" muted loop>
                <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=3" type="video/mp4" />
            </video>
        </div>

        <div class="item">
            <video class="thevideo" muted loop>
                <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=3" type="video/mp4" />
            </video>
        </div>

        <div class="item">
            <video class="thevideo" muted loop>
                <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=3" type="video/mp4" />
            </video>
        </div>

        <div class="item">
            <video class="thevideo" muted loop>
                <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=3" type="video/mp4" />
            </video>
        </div>
    </div>
</body>

</html>

原因分析 #

这是Flex布局特性和CSS过渡计算逻辑共同导致的：

• 悬停时：触发flex-grow:10后，元素实际宽度还没达到max-width的限制，此时浏览器可以直接计算flex属性的过渡值，动画流畅。
• 移出时：元素要从flex-grow:10转回flex:1，但此时元素宽度已经超过了非悬停状态下的max-width限制。浏览器必须先把宽度强制收缩到max-width范围内，再执行flex属性的过渡——这个收缩过程没被包含在transition里，所以看起来就是过渡触发前有延迟。
• 固定值/Min-width的问题：哪怕换成固定值max-width或改用min-width，移出时元素依然需要先调整宽度到符合限制的数值，再执行flex过渡，本质逻辑和百分比一致，所以延迟依旧。

解决思路 #

• 把max-width也加入过渡属性列表，让宽度调整和flex过渡同步执行：

  transition: flex 0.6s cubic-bezier(0.77, 0, 0.175, 1), max-width 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  

• 改用flex-basis控制元素基础宽度，替代max-width，避免宽度限制和flex属性的冲突。

内容的提问来源于stack exchange，提问作者Ayla Cullen