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

Question

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.

Do the`.aligned` `
` have to fill the available height at all times or would it be OK for it to shrink and grow with its content? — Nico O, Jan 18 '22 at 08:47
That was just my way of getting it to center items vertically, so yes it will be OK for it to shrink/grow according to its content. — Barry Michael Doyle, Jan 18 '22 at 08:49

score 2 · Accepted Answer · answered Jan 18 '22 at 08:50

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>

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

1 Answers1