顶部溢出不可滚动答案

【问题标题】：Top overflow is unscrollable顶部溢出不可滚动
【发布时间】：2018-02-19 19:04:42
【问题描述】：

我不明白为什么跟随 sn-p 不会让我一直向上滚动。内部容器似乎超过了外部容器，但这种溢出被部分忽略了。这是什么原因造成的？

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>

【问题讨论】：

标签： html css scroll flexbox

【解决方案1】：

Flex 正在杀死你。只需删除它并正常对齐 - flex 会导致溢出。

body{
  margin: 0;
}

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


.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>

【讨论】：

【解决方案2】：

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

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;
}

<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>

【讨论】：

您以这种方式避免了溢出问题（没想到，很好），尽管这可能是一个有效的解决方案。如果 OP 决定这是他更喜欢的，你会得到我的投票（我认为溢出是必须的）。
我其实需要溢出，那样内容会被压扁，所以这种方法恐怕不行。

【解决方案3】：

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

【讨论】：