Переполнение: автоэлементы неправильно прокручиваются в вертикально центрированном элементе

#html #css

#HTML #css

Вопрос:

При добавлении overflow:auto к моим «Пунктам меню» с вертикальным центром и уменьшении высоты экрана верхние «Пункты меню» прокручиваются не до самого верха. Смотрите скрипку и изображение ниже.

JS Fiddle

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

 .menu {
  background: red;
  height: 100%;
  width: 50%;
  position: fixed;
  overflow: auto;
}

.menu-items {
  display: flex;
  align-items: center;
  height: 100%;
}

li {
  font-size: 30px;
}

.first-item {
  background: blue;
}

 <div class="menu">
  <div class="menu-items">
    <ul>
      <li class="first-item">Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
      <li>Menu Item 4</li>
      <li>Menu Item 5</li>
      <li>Menu Item 6</li>
      <li>Menu Item 7</li>
      <li>Menu Item 8</li>
      <li>Menu Item 9</li>
      <li>Menu Item 10</li>
    </ul>
  </div>
</div>

Ответ №1:

Ваши элементы .menu должны иметь min-height не height

 .menu {
  background: red;
  height: 100%;
  width: 50%;
  position: fixed;
  overflow: auto;
}

.menu-items {
  display: flex;
  align-items: center;
  min-height: 100%;
}

li {
  font-size: 30px;
}

.first-item {
  background: blue;
}

 <div class="menu">
  <div class="menu-items">
    <ul>
      <li class="first-item">Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
      <li>Menu Item 4</li>
      <li>Menu Item 5</li>
      <li>Menu Item 6</li>
      <li>Menu Item 7</li>
      <li>Menu Item 8</li>
      <li>Menu Item 9</li>
      <li>Menu Item 10</li>
    </ul>
  </div>
</div>

Ответ №2:

Удаление позиции: исправлено; решает проблему

Ответ №3:

Я думаю, то, к чему вы стремились, означает это изменение:

Измените правило CSS для .menu-items на это:

 .menu-items {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

2. Не беспокойтесь. По-прежнему не выровнены по вертикали при настройке высоты.

Ответ №4:

Хорошо, я проверил ваш код, но, похоже, все в порядке. Я думаю, что это проблема с разрешением (компилятор jsFiddle имеет разрешение всего половины страницы, а компилятор фрагментов stack overflow — всего 1/20 страницы). Здесь я переработал ваш код, добавив элемент br. Попробуйте запустить приведенный ниже код в полноэкранном режиме.

 <div class="menu">
  <div class="menu-items">
   <br>
    <ul>
      <li class="first-item">Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
      <li>Menu Item 4</li>
      <li>Menu Item 5</li>
      <li>Menu Item 6</li>
      <li>Menu Item 7</li>
      <li>Menu Item 8</li>
      <li>Menu Item 9</li>
      <li>Menu Item 10</li>
    </ul>
  </div>
</div>

 <!doctype html>
<html>

<head>
  <style>
    .menu {
      background: red;
      height: 100%;
      width: 50%;
      position: fixed;
      overflow: auto;
    }
    
    .menu-items {
      display: flex;
      align-items: center;
      height: 100%;
    }
    
    li {
      font-size: 30px;
    }
    
    .first-item {
      background: blue;
    }
    
    <div class="menu"><div class="menu-items"><ul><li class="first-item">Menu Item 1</li><li>Menu Item 2</li><li>Menu Item 3</li><li>Menu Item 4</li><li>Menu Item 5</li><li>Menu Item 6</li><li>Menu Item 7</li><li>Menu Item 8</li><li>Menu Item 9</li><li>Menu Item 10</li></ul></div></div>
  </style>
</head>

<body>
  <div class="menu">
    <div class="menu-items">
      <ul>
        <li class="first-item">Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
        <li>Menu Item 4</li>
        <li>Menu Item 5</li>
        <li>Menu Item 6</li>
        <li>Menu Item 7</li>
        <li>Menu Item 8</li>
        <li>Menu Item 9</li>
        <li>Menu Item 10</li>
      </ul>
    </div>
  </div>
</body>

</html>

Если у вас это не работает, пожалуйста, ответьте мне в комментариях, потому что ваше объяснение непонятно…