When centering horizontally, li's get cut off

Question

I am trying to layout li's using flexbox. I have them set to column, with 3 li's in each column. The problem is when I want the ul centered.

I am centering the ul using align-content: center. When I do that, and have more li's than the page can show (overflowed), the li's at the beginning get cut off. (The ones on the left side get cut off, but the ones on the right side display fine.)

I will not have a specific number of li's, it could range from 4 to 50. So I therefore cannot remove align-content: center, because when I have a small amount of li's, (let's say 4), the results are not what I want.

How can I center the ul without having it get cut off?

JSFiddle

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    flex-direction: column;
    width: 100%;
    height: 70%;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    list-style-type: none;
    width: 200px;
}

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
    </ul>
</div>

Answer 1

How can I center the ul without having it get cut off?

That was a really good question, had some trouble figuring a way to achieve this behavior.

I don't believe you will find a pure CSS solution, however we can do it using a bit of javascript.

Basically i´ve created a script attached to the window resize event that will do the following:

1. check how many items we have inside our wrapper element: #wrapper
2. divide the number of elements by 3 (since we have 3 elements in each column) to discover how many columns will be needed to display the items
3. assign a width to the wrapper element using the following formula: number of columns * width of each item (in our case that's 200px)

Doing that we force the overflow in the parent element, and the scrollbar will have a normal behavior, showing every element.

The full code is available in jsfiddle.

Check the following example:

function onResize() {

  var wrapper = document.querySelector('#wrapper');

  var items = wrapper.querySelectorAll('li');

  var columns = Math.ceil(items.length / 3);

  var width = 200 * columns;

  wrapper.style.width = width > window.innerWidth ? width + 'px' : '100%';

}

onResize();

window.addEventListener('resize', onResize);

html,
body {
  height: 100%;
  text-align: center;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#wrapper {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
}
ul {
  height: 75%;
  list-style: none;
  display: flex;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
li {
  flex-basis: calc(100% / 3 - 2px);
  color: firebrick;
  border: 1px solid firebrick;
  background-color: greenYellow;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="wrapper">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>