Javascript 弹性箱项目不'；t在chrome上重新正确渲染

在以编程方式更改flex box项的尺寸或位置属性时，我遇到了不同的浏览器行为。在Chrome上，布局不会恢复到其原始状态

在这种情况下，当用户单击图像时，我将项目位置更改为绝对，并修改其宽度和高度（实际上，它可能是影响布局的任何内容，例如填充）。当用户再次单击时，我回滚更改，因此我希望布局会相应地重置

js的一个解决方法是通过前后快速改变项目填充1px来强制重新渲染布局，但我想知道：

为什么会发生这种情况？是否存在仅css的解决方法

铬 当用户再次单击并重置flex项样式时，将不再考虑flex basis，布局将被破坏。

火狐 当用户再次单击并重置flex项样式时，所有项都会正确呈现。

newvue({
el:“#应用程序”，
数据（）{
返回{
activeImageIndex:null，
图像：[{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“50%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“50%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“30%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“30%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“30%”
}
},
]
}
},
方法：{
onClick（索引）{
this.activeImageIndex=this.activeImageIndex==索引？null:索引
}
},
})

#应用程序{
宽度：800px；
}
.ig容器{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
利润率：0-5px；
位置：相对位置；
高度：500px；
}
.ig项目{
弹性：1；
填充：10px；
框大小：边框框；
}
.ig项目：悬停>div{
边框颜色：绿色；
}
.ig-item.active{
位置：绝对位置；
z指数：3；
宽度：100%；
身高：100%；
}
.ig-item.active img：悬停{
光标：缩小；
}
.ig项目>部门{
身高：100%；
宽度：100%；
背景颜色：蓝色；
位置：相对位置；
边框：5px实心gainsboro；
溢出：隐藏；
}
.ig项目。ig覆盖{
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：3；
背景色：rgba（0,0,0,0.4）；
颜色：#fff；
字体大小：3rem；
显示器：flex；
对齐项目：居中；
文本对齐：居中；
}
.ig项目。ig覆盖范围{
宽度：100%；
}
.ig项目img{
身高：100%；
宽度：100%；
对象匹配：覆盖；
位置：绝对位置；
z指数：2；
转变：转变；
}
.ig项目img：悬停{
光标：放大；
}
.ig项目。加载-覆盖。ig-加载{
位置：绝对位置；
z指数：1；
}
.ig项目。加载-覆盖。ig-加载。加载图标：之后{
顶部：-2.5em；
}

这个问题看起来不寻常，但解决方法相当简单。将

最小高度：0

添加到

.ig项中

问题可能在于浏览器如何表明flex项的

minheight

属性默认为自动

请参见下面的演示：

newvue({
el:“#应用程序”，
数据（）{
返回{
activeImageIndex:null，
图像：[{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“50%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“50%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“30%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“30%”
}
},
{
网址：'https://unsplash.it/600',
风格：{
flexBasis：“30%”
}
},
]
}
},
方法：{
onClick（索引）{
this.activeImageIndex=this.activeImageIndex==索引？null:索引
}
},
})

#应用程序{
宽度：800px；
}
.ig容器{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
利润率：0-5px；
位置：相对位置；
高度：500px；
}
.ig项目{
弹性：1；
填充：10px；
框大小：边框框；
最小高度：0；/*已添加*/
}
.ig项目：悬停>div{
边框颜色：绿色；
}
.ig-item.active{
位置：绝对位置；
z指数：3；
宽度：100%；
身高：100%；
}
.ig-item.active img：悬停{
光标：缩小；
}
.ig项目>部门{
身高：100%；
宽度：100%；
背景颜色：蓝色；
位置：相对位置；
边框：5px实心gainsboro；
溢出：隐藏；
}
.ig项目。ig覆盖{
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：3；
背景色：rgba（0,0,0,0.4）；
颜色：#fff；
字体大小：3rem；
显示器：flex；
对齐项目：居中；
文本对齐：居中；
}
.ig项目。ig覆盖范围{
宽度：100%；
}
.ig项目img{
身高：100%；
宽度：100%；
对象匹配：覆盖；
位置：绝对位置；
z指数：2；
转变：转变；
}
.ig项目img：悬停{
光标：放大；
}
.ig项目。加载-覆盖。ig-加载{
位置：绝对位置；
z指数：1；
}
.ig项目。加载-覆盖。ig-加载。加载图标：之后{
顶部：-2.5em；
}