頂部溢出是不可滾動的

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>