Html 溢出：自动元素在垂直居中的元素中未正确滚动

将

overflow:auto

添加到垂直居中的“菜单项”并降低屏幕高度时，顶部的“菜单项”不会一直滚动到顶部。请参见下面的小提琴和图像吼叫

使元素在垂直居中的同时正确垂直滚动的任何想法。最好是在CSS中，如果可能的话

菜单{
背景：红色；
身高：100%；
宽度：50%；
位置：固定；
溢出：自动；
}
.菜单项{
显示器：flex；
对齐项目：居中；
身高：100%；
}
李{
字体大小：30px；
}
.第一项{
背景：蓝色；
}

菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7
菜单项8
菜单项9
菜单项10

我认为你所追求的意味着这一变化：

将

菜单项的CSS规则更改为：

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

拆卸位置：固定式；解决了问题
好的，所以我检查了你的代码，但看起来没有什么问题。我认为这是一个解决问题（JSFIDLE编译器只有半页的分辨率，而堆栈溢出代码段编译器只有一页的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>





菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7
菜单项8
菜单项9
菜单项10




.菜单{
背景：红色；
身高：100%；
宽度：50%；
位置：固定；
溢出：自动；
}
.菜单项{
显示器：flex；
对齐项目：居中；
身高：100%；
}
李{
字体大小：30px；
}
.第一项{
背景：蓝色；
}
菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7
菜单项8菜单项9菜单项10

菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7
菜单项8
菜单项9
菜单项10

您的菜单项应具有
最小高度
而不是
高度


菜单{
背景：红色；
身高：100%；
宽度：50%；
位置：固定；
溢出：自动；
}
.菜单项{
显示器：flex；
对齐项目：居中；
最小高度：100%；
}
李{
字体大小：30px；
}
.第一项{
背景：蓝色；
}


菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7
菜单项8
菜单项9
菜单项10

否，我希望菜单项垂直居中，而不是水平居中。问题是当我将元素垂直居中并降低高度时，我的菜单项开始在滚动框中被切断（参见上图）。不用担心。调整高度时仍然没有垂直对齐居中。元素需要固定位置。添加
标记没有任何变化。我真的不明白您对所需内容的解释。哇！干得好！这很好用。非常感谢！