Не так давно я столкнулся с проблемой выравнивания контента по центру блока со скролом, пришлось потратить некоторое время на поиски решения этой проблемы.

Горизонтальное центрирование контента по центру блока.

Для примера реализуем блок с горизонтальным скролом. Внутри которого будет блок типа flexbox. А внутри него будет некоторое количество элементов.

<div class="scroll">
   <div class="flex-container">
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
   </div>
</div>

.scroll {
  width: 400px;
  height: 60px;
  overflow-x: scroll;
  border: 1px solid #d1d1d1;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-item {
  padding: 6px 10px;
  border: 1px solid #d1d1d1;
}

Если посмотреть на результат то на первый взгляд может показаться что все в порядке.

Но если проинспектировать код то можно заметить что ширина flex контейнера равна ширине родительского блока со скролом.

Теперь предположим что нам нужно отцентрировать элементы внутри flex контейнера.

Если элементов будет несколько то все будет нормально отображаться.

Но если элементов будет больше и появится горизонтальный скрол то можно заметить что отображение сломалось.

Положение скрола находится в начальном положении но первый элемент виден не полностью.

Эта проблема решается добавлением min-width: max-content; в .flex-container

О свойствах min-width можно почитать здесь. Стоит заметить что IE не поддерживает max-content.

.flex-container {
  display: flex;
  justify-content: center;
  min-width: max-content;
}

В примере ниже можно посмотреть проблему и ее решение.

Вертикальное выравнивание контента по центру блока.

Теперь давайте разберем пример с вертикальным выравниванием по центру блока со скролом.

Предположим у нас есть блок со скролом внутри которого нам нужно отцентрировать flexbox блок с элементами

<div class="scroll">
    <div class="flex-container">
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
      <div class="flex-item">Element</div>
    </div>
</div>

.scroll {
  display: flex;
  width: 400px;
  height: 100px;
  border: 1px solid #d1d1d1;
  overflow-y: scroll;
}

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.flex-item {
  margin: 0 0 10px;
}

Результат такой же как и в предыдущем примере.

Но в инспекторе Google Chrome можно увидеть что высота flexbox контейнера равна родительскому блоку.

И если немного проскролить то можно увидеть что контент не обтекает содержимое. Но пока не включено вертикальное выравнивание контент отображается нормально.

Теперь включим выравнивание контента по центру. Если элементов мало то все отображается нормально.

А если при выравнивании flexbox контейнера в нем будет много элементов, которые занимают больше пространства и мы проинспектируем элемент то можно увидеть что первые элементы уходят за пределы видимости родительского контейнера.

Теперь давайте добавим flexbox контейнеру margin: auto; и посмотрим на результат.

Готово, теперь контейнер растянулся по содержимому.

В примере ниже можно наглядно посмотреть решение проблемы.

Про выравнивание margin’ами можно почитать здесь.

Спасибо за внимание, надеюсь эта статья была полезной.