右侧div hover展开transition失效及消失问题技术求助

问题根源 #

1. Float布局局限性：使用float: left让三个div平分宽度时，任意div hover后宽度变为90vw，会直接把右侧div挤出可视区域——float元素按顺序排列，父容器没有足够空间容纳放大后的元素，导致右侧div消失。
2. 右侧Div闪烁原因：右侧div hover时向右扩张，但页面右侧无额外空间，元素溢出视口外，鼠标随即脱离元素触发hover取消，元素缩回后鼠标又重新触发hover，形成循环闪烁。
3. 过渡属性冲突：.grow类中重复定义transition，后面的transition:1.5s覆盖了前面的transition: width 0.5s，导致过渡效果不符合预期。

修复方案：改用Flex布局 #

用flex布局替代float，通过父容器控制子元素空间分配，既能实现hover展开的平滑过渡，又不会挤掉其他元素，同时解决右侧div的闪烁问题。

修正后的HTML #

<div class="container">
  <div class="home grow">
    <a routerLink="">HOME</a>
  </div>
  <div class="books grow">
    BOOKS
  </div>
  <div class="about grow">ABOUT</div>
</div>

修正后的CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免padding/margin干扰宽度计算 */
}

.container {
  display: flex; /* 父容器启用flex布局 */
  width: 100vw;
  height: 100vh;
}

.container > div {
  flex: 1; /* 三个div平分父容器空间 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: flex 0.5s ease; /* 统一过渡flex属性，消除冲突 */
  overflow: hidden;
}

.home {
  background-color: grey;
}

.books {
  background-color: lightblue;
}

.about {
  background-color: lightcyan;
}

.grow:hover {
  flex: 9; /* hover时扩大元素占比，适配flex布局的空间分配逻辑 */
}

关键修改说明 #

• Flex替代Float：父容器设为display:flex，子元素用flex:1平分空间，hover时调整flex值实现扩张，不会将其他元素挤出视口。
• 统一过渡属性：删除重复的transition定义，明确过渡flex属性，确保过渡效果稳定。
• 添加box-sizing：避免元素内边距、外边距影响宽度计算，保证布局精准。

如果偏好固定宽度（比如90vw），可调整为以下写法：

.container > div {
  width: 33.33%;
  flex-shrink: 0; /* 禁止元素自动收缩 */
  transition: width 0.5s ease;
}

.grow:hover {
  width: 90vw;
}

同时父容器需设置溢出隐藏：

.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 隐藏溢出部分，避免出现横向滚动条 */
}

内容的提问来源于stack exchange，提问作者Abdullah Shekfeh