如何让可折叠侧边栏的内部元素在折叠时保持固定静止状态

核心解决思路 #

折叠时侧边栏宽度变化触发内部元素重排，核心是固定所有视觉元素的布局约束，避免非宽度属性随折叠状态变更。

具体修改方案 #

• 统一盒模型规则：给侧边栏及所有内部元素添加box-sizing: border-box，确保内边距、边框不会额外增加元素宽度
• 固定图标容器属性：给每个图标单独包裹容器，设置固定宽高，同时添加flex-shrink: 0禁止布局挤压时收缩，保持图标位置固定
• 优化文本隐藏逻辑：不要使用display: none隐藏展开状态的文本，改为设置width: 0; opacity: 0; visibility: hidden; overflow: hidden; white-space: nowrap;，让文本宽度随侧边栏折叠平滑过渡，不会突然脱离文档流导致布局跳动
• 统一侧边栏内边距：折叠、展开状态下侧边栏的上下左右内边距保持完全一致，不要随状态变更修改padding值
• 固定菜单项尺寸：每个菜单项设置固定高度，避免折叠后高度变化产生多余间隙

示例代码 #

/* 侧边栏容器 */
.sidebar {
  width: 200px;
  transition: width 0.3s ease;
  padding: 16px 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* 折叠状态侧边栏 仅修改宽度 */
.sidebar.collapsed {
  width: 48px;
}
/* 单个菜单项 固定高度 */
.sidebar-item {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: 8px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
}
/* 图标容器 固定尺寸 禁止收缩 */
.sidebar-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 12px;
}
/* 文本部分 平滑过渡隐藏 */
.sidebar-item__text {
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.2s ease;
}
.sidebar.collapsed .sidebar-item__text {
  width: 0;
  opacity: 0;
  visibility: hidden;
  margin: 0;
}

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