align-items: center искажает высоту родителя

Question

Я хочу построить что-то вроде карусели, которую вы можете перемещать с помощью полосы прокрутки. На каждом из слайдов есть одна строка текста, которая должна быть как горизонтально, так и вертикально. Настройка align-items: center изменяет высоту родительского элемента div.

.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
}

<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

Закомментируйте align-items, и он подходит. Как мне решить эту проблему?

Answer 1

Проблема не в align-items: center. Это все хорошо.

Проблема в том, что ваш flex-контейнер является встроенным блоком (display: inline-flex), который активирует настройку vertical-align: baseline по умолчанию.

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

Просто переопределите значение по умолчанию с помощью vertical-align: bottom.

.carousel .slide {
    vertical-align: bottom;
}

.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
  vertical-align: bottom;  /* NEW */
}

<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

Также обратите внимание:

• проблема не возникает при удалении align-items: center, поскольку значение по умолчанию stretch, что позволяет выравнивать текст по базовой линии (т. Е. По первой строке) по полям независимо от количества строк (* 1025) * демо )
• flex-start также будет работать ( демо )
• flex-end не будет ( демо )

Подробнее о vertical-align: baseline:

• Почему вертикальная полоса прокрутки, если родитель и ребенок имеют одинаковую высоту?