CSS – Флексы – Как разместить контент в центре и сверху одновременно? (При разных условиях)

Question

На картинке показано то, чего я хочу добиться (Сделано в графическом редакторе).

Сверху пример, когда мало контента (Блоки в центре).
Снизу пример, когда контент перестаёт умещается в материнском блоке (Блоки остаются прижаты к началу. А остальные блоки, можно увидеть пролистав вниз).

Моя неудачная → попытка.

div {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

.a1 {
  position: absolute;
  width: 90%;
  height: 90%;
  flex-direction: column;
  overflow: scroll;
  border: 1px solid rgba(0, 0, 255, 0.5);
}

.a2 {
  width: 20%;
  height: 20%;
  border: 1px solid rgba(255, 0, 0, 0.5);
}

<div class="a1">

  <div class="a2">1</div>
  <div class="a2">2</div>
  <div class="a2">3</div>
  <div class="a2">4</div>
  <div class="a2">5</div>
  <div class="a2">6</div>
  <div class="a2">7</div>
  <div class="a2">8</div>
  <div class="a2">9</div>
  <div class="a2">10</div>
  <div class="a2">11</div>
  <div class="a2">12</div>
  <div class="a2">13</div>
  <div class="a2">14</div>

</div>

Answer 1

Проблема в justify-content: center;.

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

Похоже на bug

В качестве обходного пути можно убрать это свойство и выравнивать элементы по центру за счет двух пустых элементов по краям с установленными flex-grow:1

Например:

div {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.a1 {
  position: absolute;
  width: 90%;
  height: 90%;
  flex-direction: column;
  overflow: scroll;
  border: 1px solid rgba(0, 0, 255, 0.5);
}

.a2 {
  width: 20%;
  height: 20%;
  border: 1px solid rgba(255, 0, 0, 0.5);
}

.a1::before,
.a1::after {
  content: '';
  flex-grow: 1;
}

<div class="a1">

  <div class="a2">1</div>
  <div class="a2">2</div>
  <div class="a2">3</div>
  <div class="a2">4</div>
  <div class="a2">5</div>
  <div class="a2">6</div>
  <div class="a2">7</div>
  <div class="a2">8</div>
  <div class="a2">9</div>
  <div class="a2">10</div>
  <div class="a2">11</div>
  <div class="a2">12</div>
  <div class="a2">13</div>
  <div class="a2">14</div>

</div>

БЛОГ НА HUSL

CSS – Флексы – Как разместить контент в центре и сверху одновременно? (При разных условиях)

Ответы (1 шт):