Центрированное содержимое вырезано из родительского элемента с фиксированной высотой и полосой прокрутки.

Question

У меня есть родитель с overflow-y и фиксированной высотой .Я хочу, чтобы центр выровнял его дочерний элемент .Содержимое дочернего элемента может иметь различный размер , и иногда оно переполняет родительский элемент и вызывает полосу прокрутки.В этих случаях верхнее и нижнее содержимое дочернего элемента вырезается .

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

Проверьте проблему здесь: https://jsfiddle.net/gumy023z/

.parent {
  background-color: red;
  height: 40px;
  overflow-y: scroll;
  
  /* Comment out the flex, and all the content will be available */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div class="child">
    This is a test <br> This is a test <br> This is a test
  </div>
</div>

Answer 1

Выравнивание будет работать на оси сгиба из flexbox .Таким образом, вы можете переключиться на столбец flexbox и задать для child 1009 * (который переопределяет значение по умолчанию min-width: auto для элемента flex ) для *1015*элемент - см. демо ниже:

.parent {
  background-color: red;
  height: 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column; /* ADDED */
  justify-content: center;
  align-items: center;
}

.child {
  min-height: 0; /* ADDED */
}

<div class="parent">
  <div class="child">
    1. This is a test <br> 2. This is a test <br> 3. This is a test
  </div>
</div>