顶部溢出是不可滚动的

Question

我无法弄清楚为什么以下片段不会让我一直向上滚动。内部容器似乎超过外部容器，但这种溢出部分被忽略。造成这种情况的原因是什么？

body{
  margin: 0;
}

.outer {
  height: 100vh;
  display: flex;
  overflow-y: auto;
  justify-content: center;
  align-items: center;
}

.inner {
  display: flex;
  flex-direction: column;
}

.inner>div {
  height: 50px;
}

<div class="outer">
  <div class="inner">
    <div>heck 1</div>
    <div>heck 2</div>
    <div>heck 3</div>
    <div>heck 4</div>
    <div>heck 5</div>
    <div>heck 6</div>
    <div>heck 7</div>
    <div>heck 8</div>
    <div>heck 9</div>
    <div>heck 10</div>
  </div>
</div>

Answer 1

Flex正在杀死你。只需移除它并正常对齐 - 用溢出来弯曲混乱。

＆＃13;

＆＃13;

body{
  margin: 0;
}

.outer {
  height: 100vh;
  overflow-y: auto;
  align-items: center;
  text-align:center;
}


.inner>div {
  height: 50px;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <div>heck 1</div>
    <div>heck 2</div>
    <div>heck 3</div>
    <div>heck 4</div>
    <div>heck 5</div>
    <div>heck 6</div>
    <div>heck 7</div>
    <div>heck 8</div>
    <div>heck 9</div>
    <div>heck 10</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

经过多次搜索后，我找到了解决方案，我正在寻找here，结果在flexbox中，自动边距也可以垂直工作。谢谢大家的帮助！

Answer 3

尝试给内部容器一个高度..

＆＃13;

＆＃13;

body{
  margin: 0;
}

.outer {
  height: 100vh;
  display: flex;
  overflow-y: auto;
  justify-content: center;
  align-items: center;
}

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

.inner>div {
  height: 50px;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <div>heck 1</div>
    <div>heck 2</div>
    <div>heck 3</div>
    <div>heck 4</div>
    <div>heck 5</div>
    <div>heck 6</div>
    <div>heck 7</div>
    <div>heck 8</div>
    <div>heck 9</div>
    <div>heck 10</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;