顶部溢出是不可滚动的

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

经过搜索，我发现解决方案，我一直在寻找here，原来在Flexbox的汽车利润率也垂直工作。感谢大家的帮助！

Answer 2

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>

Answer 3

先给内部容器的高度..

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>

Answer 4

你不需要outer元素align-items: center - 这会导致问题溢出。

默认值stretch的align-items会导致溢出行为。您还必须将flex-shrink: 0设置为.inner > div以防止默认的收缩以维持溢出。

编辑：在没有溢出时，将auto边距加到inner的中间内容上。同样居中里面的内容使他们成为一个flexbox。

请参见下面的演示：

body { 
 
    margin: 0; 
 
} 
 

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

 
.inner { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: auto; /* ADDED */ 
 
} 
 

 
.inner>div { 
 
    height: 50px; 
 
    /* ADDED */ 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    align-items: center; 
 
}

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