Animated Sidebar实现问题：侧边栏隐藏后内容区无法占满父容器宽度

问题原因 #

你遇到的内容区无法占满全宽的核心原因是：transform属性仅会改变元素的视觉渲染位置，不会修改元素在正常文档流中的实际占位，所以侧边栏即使通过translateX(-100%)滑出视野，它原本占据的flex空间依然保留，内容区自然无法填充这部分空间。

方案选择说明 #

两种过渡属性的适用场景：

• 如果你想要侧边栏滑入滑出时同步挤压/释放内容区空间，优先给flex-basis/flex属性设置过渡，该方案会实时修改元素的实际占位，符合你需要内容区占满全宽的需求
• 如果你想要侧边栏是悬浮层滑入滑出、不挤压内容区的效果，就给transform属性设置过渡，需要额外把侧边栏设置为绝对定位脱离文档流

适配需求的修改代码 #

CSS部分 #

nav{
  width: 100%;
  display: flex;
  justify-content : center;
}

.container{
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
}

.sidebar{
  /* 固定侧边栏宽度，可按需调整数值 */
  flex-basis: 200px;
  flex-shrink: 0;
  background-color: rgb(40,100,250);
  height: 100vh;
  /* 过渡宽度属性 */
  transition: flex-basis 0.5s linear;
  /* 隐藏收缩时溢出的内容 */
  overflow: hidden;
}

/* 隐藏状态下宽度收缩为0 */
.sidebar:not(.visible){
  flex-basis: 0;
}

.content{
  background-color: rgb(33,31,31);
  /* 自动占据容器剩余全部宽度 */
  flex-grow: 1;
  text-align: center;
  color: #fff;
}

JS部分 #

const homeButton = document.getElementById("home");
const sidebarDiv = document.getElementById("sidebar");
homeButton.addEventListener("click", () => {
  // 直接切换类即可，无需额外操作内容区
  sidebarDiv.classList.toggle("visible");
});

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