边栏按钮没有换行到下一行

Question

我想做一个侧边栏，我试图重用底部栏的代码。这些按钮不会换行到下一行。

我试着改变空白希望解决这个问题。实际的结果是按钮堆叠在一起。

.side-bar {
position: fixed;
left: 0;
width: 55px;
height: 100%;
background-color: #000;
display: flex;
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;
}

<div class="main">
<div class="side-bar">
<button class="s-btn"><span class="material-symbols-outlined">
chat
</span></button>
<button class="s-btn"><span class="material-symbols-outlined">
chat
</span></button>
<button class="s-btn"><span class="material-symbols-outlined">
chat
</span></button>
<button class="s-btn"><span class="material-symbols-outlined">
chat
</span></button>
</div>
</div>

Answer 1

可以在.side-bar类上使用flex-wrap: wrap或flex-direction: column:

.side-bar {
position: fixed;
left: 0;
width: 55px;
height: 100%;
background-color: #000;
display: flex;
flex-wrap: wrap; /* or flex-direction: column*/
overflow-y: auto;
}

当没有足够的空间时，将元素移动到下一行。

Flex方向列将列位置的元素堆叠