如何实现容器:hover时滑入div并仅压缩指定div？

问题分析 #

你需要实现的是：容器内三个div，div3初始隐藏在容器右侧外，hover容器时div3滑入，推动div2左移，仅压缩div1（div2、div3宽度固定）。之前嵌套div4后遇到div4无法撑满容器的问题，原因是用right: -60px让div3脱离文档流，导致容器计算宽度时忽略了div3的占位，进而影响了内部子元素的宽度填充。

解决方案 #

不需要额外嵌套div4，直接利用flex布局的特性即可实现需求，核心是通过transform控制div3的位移（不影响文档流），同时设置各元素的flex属性控制压缩规则：

<div class="container">
  <div class="div1">div1 - 可压缩</div>
  <div class="div2">div2 - 固定宽</div>
  <div class="div3">div3 - 固定宽</div>
</div>

.container {
  display: flex;
  width: 400px;
  height: 60px;
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
}

.div1 {
  flex: 1 1 auto; /* 自动填充剩余空间，允许被压缩 */
  background: #eee;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.div2, .div3 {
  flex-shrink: 0; /* 禁止压缩，保持固定宽度 */
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div2 {
  background: #ccc;
}

.div3 {
  background: #999;
  transform: translateX(100%); /* 初始移出容器右侧 */
  transition: transform 0.3s ease;
}

.container:hover .div3 {
  transform: translateX(0); /* hover时滑入 */
}

关键说明 #

1. flex属性设置：
   • div1的flex: 1 1 auto意味着它会优先填充容器剩余空间，且在容器宽度不足时会被压缩，而div2和div3的flex-shrink: 0确保它们的宽度始终固定，不会被压缩。
2. 位移方式选择：
   • 使用transform: translateX(100%)代替right: -60px，因为transform不会改变元素的文档流占位，容器会正确计算所有子元素的总宽度，避免出现内部元素无法撑满的问题。
3. 过渡动画：
   • 给div3的transform添加过渡，实现平滑的滑入效果，容器的overflow:hidden确保div3未滑入时不会显示在容器外。

内容的提问来源于stack exchange，提问作者Maxime Zinderstein