侧边栏按钮无法换行，修改white-space后出现堆叠问题求助

你的问题核心是侧边栏的flex布局方向错误，默认flex-direction: row会让按钮横向排列，而侧边栏需要垂直布局。修改步骤如下：

1. 调整侧边栏的flex方向为垂直：
   给.side-bar添加flex-direction: column，这样按钮会垂直排列，自然实现换行效果。

2. 按需调整按钮属性：
   .s-btn的flex-direction: row可以保留（适配按钮内图标的横向居中对齐）；flex-grow: 1会让按钮自动撑满侧边栏剩余空间，若希望按钮保持固定高度可去掉该属性，保留则按钮会均分侧边栏高度。

修改后的完整CSS代码：

.side-bar {
  position: fixed;
  left: 0;
  width: 55px;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column; /* 关键：改为垂直布局 */
  overflow-y: auto;
}

.s-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* flex-grow: 1; 按需选择保留或删除 */
  min-height: 50px;
  overflow: hidden;
  white-space: nowrap; /* 控制按钮内文本不换行，与按钮整体布局无关 */
  background: none;
  border: none;
  color: #fff;
}

原理说明： #

• flex容器默认flex-direction: row，子元素横向排列，侧边栏宽度固定55px时，按钮会挤在一起，表现为“无法换行”；改为column后，子元素垂直排列，每个按钮占一行。
• white-space: nowrap仅控制按钮内部的文本（如图标旁的文字）不换行，和按钮本身的布局无关，之前修改它导致堆叠是因为未解决flex方向的核心问题。

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