Side bar buttons not wrapping to next line

November 15, 2022

I’m trying to make a sidebar and I tried to reuse the code for the bottom bar. The buttons wont wrap to the next line.

I tried changing the white-space hoping to fix the problem. The actual result was the buttons being stacked on top of each other.

.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>

>Solution :

You can use flex-wrap: wrap or flex-direction: column on .side-bar class:

.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 wrap move the element to the next line whenever there’s no more space for it.

Flex direction columns stack the elements in column position