Css Flexbox，压缩其他内联元素以显示100%悬停元素

下面，我使用flexbox排列了4个元素。我让它工作，所以当我悬停在其中一个元素上时，它会使该元素100%压缩其他元素

我遇到的问题是转换工作不正常

.集装箱{ 显示器：flex； } .货柜组{ 柔性生长：1； 高度：50px； 背景色：红色； 左边框：2个实心777； 右边框：2个实心777； 过渡：all.2s； } .货柜组：第n个类型1{ 背景颜色：蓝色； } .货柜组：第n个类型2{ 背景色：红色； } .货柜组：第n种类型3{ 背景颜色：橙色； } .货柜组：第n种类型4{ 背景颜色：黄色； } .货柜组：悬停{ 宽度：100%； }

---

我意识到我只需要设置一个定义宽度

问题是它试图过渡到100%宽度，而不知道从何过渡

将宽度设置为0px或0%将修复过渡动画

注*如果您正在寻找IE 10和11支持，则可使用此解决方案。上述flex basis解决方案在IE上不起作用

.集装箱{ 显示器：flex； } .货柜组{ 柔性生长：1； 高度：50px； 背景色：红色； 左边框：2个实心777； 右边框：2个实心777； 宽度：0px； 过渡：all.2s； } .货柜组：第n个类型1{ 背景颜色：蓝色； } .货柜组：第n个类型2{ 背景色：红色； } .货柜组：第n种类型3{ 背景颜色：橙色； } .货柜组：第n种类型4{ 背景颜色：黄色； } .货柜组：悬停{ 宽度：100%； }

---

我意识到我只需要设置一个定义宽度

问题是它试图过渡到100%宽度，而不知道从何过渡

将宽度设置为0px或0%将修复过渡动画

注*如果您正在寻找IE 10和11支持，则可使用此解决方案。上述flex basis解决方案在IE上不起作用

.集装箱{ 显示器：flex； } .货柜组{ 柔性生长：1； 高度：50px； 背景色：红色； 左边框：2个实心777； 右边框：2个实心777； 宽度：0px； 过渡：all.2s； } .货柜组：第n个类型1{ 背景颜色：蓝色； } .货柜组：第n个类型2{ 背景色：红色； } .货柜组：第n种类型3{ 背景颜色：橙色； } .货柜组：第n种类型4{ 背景颜色：黄色； } .货柜组：悬停{ 宽度：100%； } 设置flex基础的动画

但这在IE上不起作用，因为它需要使用宽度

.集装箱{ 显示器：flex； } .货柜组{ 柔性生长：1； 弹性基准：0； 溢出：隐藏；/*已添加，因此任何内容都会隐藏*/ 高度：50px； 背景色：红色； 左边框：2个实心777； 右边框：2个实心777； 过渡：弹性基础。5s； } .货柜组：第n个类型1{ 背景颜色：蓝色； } .货柜组：第n个类型2{ 背景色：红色； } .货柜组：第n种类型3{ 背景颜色：橙色； } .货柜组：第n种类型4{ 背景颜色：黄色； } .货柜组：悬停{ 弹性基准：100%； } 设置flex基础的动画

但这在IE上不起作用，因为它需要使用宽度

.集装箱{ 显示器：flex； } .货柜组{ 柔性生长：1； 弹性基准：0； 溢出：隐藏；/*已添加，因此任何内容都会隐藏*/ 高度：50px； 背景色：红色； 左边框：2个实心777； 右边框：2个实心777； 过渡：弹性基础。5s； } .货柜组：第n个类型1{ 背景颜色：蓝色； } .货柜组：第n个类型2{ 背景色：红色； } .货柜组：第n种类型3{ 背景颜色：橙色； } .货柜组：第n种类型4{ 背景颜色：黄色； } .货柜组：悬停{ 弹性基准：100%； }

---

请注意，此解决方案不适用于IE 11，因为它使用flex basis。@HunterTurner sight！。。。用便条更新了我的答案。我不介意你因为这个而接受你自己的答案。您的解决方案是最好的，因为它使用flexbox。真遗憾，IE的存在，哈哈。一旦IE被删除，我将返回并接受您的答案。请注意，此解决方案不适用于IE 11，因为它使用flex basis。@HunterTurner叹气！。。。用便条更新了我的答案。我不介意你因为这个而接受你自己的答案。您的解决方案是最好的，因为它使用flexbox。真遗憾，IE的存在，哈哈。一旦IE被删除，我会回去接受你的答案xD