Проблема при центрировании по вертикали с помощью flexbox, когда высоты неизвестны

В моем макете есть контейнер flex-container и дочерний элемент.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

Контейнер и ребенок имеют неизвестную высоту. И цель:

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

Схема: enter image description here

Самый быстрый способ центрирования элемента с flexbox заключается в следующем:

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Ответы

Ответ 1

Я нашел решение:

.flex-container
{
  display: flex; /* only */
  overflow-y: scroll;
}

.flex-container > div
{
  margin: auto; /* horizontal and vertical align */
}


html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  width: 100%;
  height: 100px; /* change height to 300px */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  padding: 1em 1.5em;
  margin: auto;
  background: #E77E23;
  width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>