CSS hover宽度过渡时如何阻止同级兄弟元素被挤压位移

需要通过CSS transition实现鼠标悬停指定元素时元素宽度增加的效果，目前基础hover动效已正常生效，但悬停触发时同级兄弟元素会被挤压移位，需要纯CSS方案解决该问题。

CSS代码 #

.aside-menu__element {
  width: 68px;
  height: 68px;
  background-color: #999;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 1s;
}

.aside-menu__element:hover {
  background-color: green;
  border-radius: 20px;
  width: 300px;
}

HTML代码 #

<div class="aside-menu">
  <div class="aside-menu__element"><i class="fa-solid fa-arrow-up-long"></i></div>
  <div class="aside-menu__element"><i class="fa-solid fa-arrow-right-long"></i></div>
  <div class="aside-menu__element"><i class="fa-solid fa-arrow-left-long"></i></div>
</div>

出现兄弟元素被挤压移位的核心原因是：默认文档流/Flex布局下，直接修改元素width属性会触发整体布局重排，父容器宽度会被变宽的子元素撑大，其余同级兄弟元素会按照布局规则重新计算位置/尺寸，最终出现移位、被挤压的效果。

针对侧边菜单的使用场景，最简便的实现方式是固定父容器宽度，关闭Flex布局下子元素的默认拉伸特性，让hover变宽的菜单项超出父容器范围展示，完全不影响其他兄弟元素的布局：

/* 新增父容器样式 */
.aside-menu {
  width: 68px; /* 固定侧边栏默认宽度，和菜单项默认宽度一致 */
  display: flex;
  flex-direction: column; /* 菜单项纵向排列 */
  align-items: flex-start; /* 子元素水平方向靠左对齐，取消默认stretch拉伸效果 */
}

.aside-menu__element {
  width: 68px;
  height: 68px;
  background-color: #999;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 替换all为具体过渡属性，提升渲染性能 */
  transition: width 1s, background-color 1s, border-radius 1s;
  position: relative;
  z-index: 1;
}

.aside-menu__element:hover {
  background-color: green;
  border-radius: 20px;
  width: 300px;
  z-index: 10; /* hover时提高层级，保证展开项覆盖在其他内容上方 */
}

方案效果 #

• 非hover状态下所有菜单项保持68px正方形尺寸，侧边栏宽度固定
• 鼠标悬停时对应菜单项平滑过渡到300px宽度，其余菜单项位置、尺寸完全不变，不会出现挤压移位
• 展开的菜单项自动浮在页面内容上方，不影响原有页面布局

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