侧边栏显示时内容右移致溢出，需实现容器缩窄效果的技术求助

你现在遇到的核心问题是：用transform: translateX(250px)来移动整个内容容器，本质是把容器整体平移，但容器的实际宽度还是100%屏幕宽度，导致右侧内容直接被挤出可视区域。要实现「容器宽度缩小，内容自适应」的效果，得调整容器的宽度/外边距，而不是平移元素。

下面给你两种可行的解决方案：

方案一：修改现有CSS，替换transform为margin+width #

这种方式不需要大改布局结构，直接调整样式即可：

/* Container */
.content {
  transition: margin-left .5s, width .5s; /* 把过渡属性换成margin和width */
  padding: 10px;
  width: 100%;
  box-sizing: border-box; /* 关键：确保padding不会额外增加容器宽度 */
}

.hidden {
  margin-left: 0;
}

.visible {
  margin-left: 250px; /* 让出侧边栏的宽度 */
  width: calc(100% - 250px); /* 容器宽度 = 屏幕宽度 - 侧边栏宽度 */
}

/*Posts*/
.title {
  font-size: 15px;
  font-weight: 350;
  margin-bottom: 5px;
  white-space: nowrap; /* 可选：标题不换行，过长显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.info {
  opacity: 0.54;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap; /* 可选：空间不足时自动换行，避免内容挤压 */
  gap: 10px;
}

修改后，菜单展开时内容容器会主动缩小宽度并向右让出空间，内部的「time created」等元素会自然适配容器宽度，不会溢出屏幕。

方案二：用Flex布局重构（更推荐，逻辑更清晰） #

把侧边栏和内容容器放在同一个flex容器里，通过控制侧边栏的宽度来实现内容自适应，布局逻辑更直观：

第一步：调整JSX结构 #

<div style={{ display: 'flex', height: '100vh' }}>
  {/* 侧边栏：根据菜单状态控制宽度 */}
  <div style={{ 
    width: toggleMenu.isVisible ? '250px' : '0', 
    overflow: 'hidden', 
    transition: 'width .5s',
    backgroundColor: '#fff', /* 按需设置背景色 */
    borderRight: '1px solid #eee' /* 可选：添加分隔线 */
  }}>
    <SideMenu 
      onClick={this.handleSelectSource.bind(this)} 
      onSelectAll={this.handleSelectAll.bind(this)} 
      onUnselectAll={this.handleUnselectAll.bind(this)} 
    />
  </div>

  {/* 内容容器：自动占据剩余空间 */}
  <div className={styles.content} style={{ flex: 1, overflowY: 'auto' }}>
    <div 
      className={`${styles.hamburger} ${toggleMenu.isVisible ? styles.change : ''}`}
      onClick={this.handleToggle.bind(this)}
    >
      <div className={styles.bar1}></div>
      <div className={styles.bar2}></div>
      <div className={styles.bar3}></div>
    </div>

    {isEmpty === true ? (
      <div className={styles.info}> Select source </div>
    ) : posts.length === 0 ? (
      <div className={styles.info}>
        <img src={require('../assets/loading.svg')} />
      </div>
    ) : (
      <div><Posts posts={posts} /></div>
    )}
  </div>
</div>

第二步：简化CSS #

现在不需要原来的.visible和.hidden类了，样式可以简化为：

/* Container */
.content {
  padding: 10px;
  box-sizing: border-box;
}

/*Posts*/
.title {
  font-size: 15px;
  font-weight: 350;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info {
  opacity: 0.54;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

这种方案的优势在于：侧边栏和内容属于同一个flex布局上下文，宽度分配由浏览器自动处理，不会出现平移导致的溢出问题，过渡效果也更流畅自然。

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