顶部溢出是不可滚动的

时间:2017-09-11 13:52:41

标签: html css css3 scroll flexbox

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

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>

3 个答案:

答案 0 :(得分:2)

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;

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

&#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;