Создать центрируемый прокручиваемый контейнер

Question

У меня есть один контейнер с гибкой шириной (100%) и элементы блока внутри, которые динамически добавляются.

<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
</div>


.main {
  display: flex;
  justify-content: center;
  overflow: scroll;
  width: 100%;
}

.block-element {
    display: flex;
    align-items: center;
    border: 1px solid blue;
    padding: 5px;
    margin-left: 20px;
}

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

Основная проблема заключается в том, что я могу сохранять элементы центрированными только с помощью flexbox, но в этом случае прокручиваемый контент на левой стороне обрезается (хорошо известная проблема с разметкой flex).

Что бы я ни делал, осталась одна проблема. Рабочий пример здесь: https://jsfiddle.net/kypLg2cm/3/

Пример 2 показывает, как содержимое обрезается с левой стороны.

Answer 1

, чтобы избежать побочных эффектов justify-content:center, вместо детей можно использовать margin:

пример:

.main {
  display: flex;
  overflow: scroll;
  width: 100%;
}

.block-element {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  padding: 5px;
  margin-left: 20px;
}

.block-element:first-of-type {
  margin-left: auto;
}

.block-element:last-of-type {
  margin-right: auto;
}

<!-- EXAMPLE 1 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

<!-- EXAMPLE 2 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element3</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element4</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element5</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element6</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element7</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element8</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element9</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element10</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

<!-- EXAMPLE 3 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element3</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

https://jsfiddle.net/za3ks0xo/

Answer 2

Изменить стиль .mail переполнение: прокрутка; на переполнение-у: скрыто;

например .

.main {
   display: flex;
   justify-content: center;
   overflow-y: hidden;
   width: 100%;
}