[FIXED] How to center items vertically and handle overflows without cutting off content

Issue

I've managed to successfully align items on a sidebar to the center of my screen. But when content overflows it gets cut out using this method.

Here's a snippet to demonstrate.

.container {
  background-color: aqua;
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: 10px;
  width: 120px;
}

.aligned {
  background-color: yellow;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0;
  overflow-y: auto;
}

<div class="container">
  <div>Sider Header</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
    <button>Item 5</button>
    <button>Item 6</button>
    <button>Item 7</button>
    <button>Item 8</button>
    <button>Item 9</button>
    <button>Item 10</button>
    <button>Item 11</button>
    <button>Item 12</button>
  </div>
  <div>Sider Footer</div>
</div>

As demonstrated above, the top elements in the aligned div get cut off when there is too much content to fit into the space - despite providing the overflow-y: auto; property.

If you increase the container height or remove some of the buttons, you can see that it successfully centers vertically.

How can I solve the content cut off problem while still vertically aligning the content to the center in scenarios where content doesn't overflow.

Solution

One possible solution would be to not actually use justify-content: center; on .aligned, but just to vertically center this container it self. For this you may use auto marging like this:

.container {
  background-color: aqua;
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: 10px;
  width: 120px;
}

.aligned {
  background-color: yellow;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  margin: auto 0;
  overflow-y: auto;
  padding: 10px 0;
}

<div class="container">
  <div>Sider Header (potential overflow)</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
    <button>Item 5</button>
    <button>Item 6</button>
    <button>Item 7</button>
    <button>Item 8</button>
    <button>Item 9</button>
    <button>Item 10</button>
    <button>Item 11</button>
    <button>Item 12</button>
  </div>
  <div>Sider Footer</div>
</div>

<div class="container">
  <div>Sider Header (less content)</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
   
  </div>
  <div>Sider Footer</div>
</div>

Answered By - Nico O

Answer Checked By - Clifford M. (PHPFixing Volunteer)