垂直中心与柔性盒隐藏内容

Question

我想创建一个用户滚动的区域，在内容（列表）垂直对齐的区域内。

我希望与flex实现对齐：

mutex.Lock

问题在于display: flex; align-items: center; 列表被截断并隐藏在溢出部分中。我已经评论了小提琴中的对齐项目，以便您可以看到问题。打开和关闭它，你会看到列表被切断并隐藏。

1. 这是为什么？
2. 修复是什么？

JSFIDDLE

段

＆＃13;
＆＃13;
align-items: center;
＆＃13;
div {
  position: fixed;
  overflow-y: scroll;
  background: grey;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  /*align-items: center;*/
}

li {
  margin: 25em 0;
}
＆＃13;
＆＃13;
＆＃13;