爲什麼溢出-x工作，但溢出不是？

Question

在提供的示例中，水平滾動容器應該儘可能向左和向右滾動，而垂直滾動容器將頁面從屏幕上展開而不允許任何滾動。滾動條出現，但它被禁用。

這個想法是在水平滾動容器之後讓垂直滾動容器覆蓋屏幕的其餘部分。

考慮到臥式容器在本例中40像素高，我設置的最大高度的垂直容器作爲calc(100% - 40px)

#container-scroll-horiz 
 
{ 
 
    width: 100%; 
 
    height: 40px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    border: 1px solid blue; 
 
} 
 

 
#container-scroll-horiz .item 
 
{ 
 
    display: inline-block; 
 
    width: 20vw; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
#container-scroll-vert 
 
{ 
 
    width: 100%; 
 
    max-height: calc(100% - 40px); 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    border: 1px solid red; 
 
} 
 

 
#container-scroll-vert .item 
 
{ 
 
    width: 100%; 
 
    height: 20vh; 
 
    border: 1px solid purple; 
 
}

<div id="container-scroll-horiz"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div id="container-scroll-vert"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 1

由於垂直滾動的元素有什麼可設置其100％的高度。

在元素的高度上使用百分比時，其父元素需要固定的高度。

如果所有父母都使用百分比，則需要一直傳遞到身體，這將使用視口的固定高度。

您可以

• 使用視口單元，max-height: calc(100vh - 40px);（樣品1）
• 設置在主體上的高度，html, body { height: 100%; }（樣品2）

樣品1

html, body { 
 
    margin: 0; 
 
} 
 

 
#container-scroll-horiz 
 
{ 
 
    width: 100%; 
 
    height: 40px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    border: 1px solid blue; 
 
    box-sizing: border-box; 
 
} 
 

 
#container-scroll-horiz .item 
 
{ 
 
    display: inline-block; 
 
    width: 20vw; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
#container-scroll-vert 
 
{ 
 
    width: 100%; 
 
    max-height: calc(100vh - 40px); 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
} 
 

 
#container-scroll-vert .item 
 
{ 
 
    width: 100%; 
 
    height: 20vh; 
 
    border: 1px solid purple; 
 
}

<div id="container-scroll-horiz"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div id="container-scroll-vert"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

樣品2

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
#container-scroll-horiz 
 
{ 
 
    width: 100%; 
 
    height: 40px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    border: 1px solid blue; 
 
    box-sizing: border-box; 
 
} 
 

 
#container-scroll-horiz .item 
 
{ 
 
    display: inline-block; 
 
    width: 20vw; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
#container-scroll-vert 
 
{ 
 
    width: 100%; 
 
    max-height: calc(100% - 40px); 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
} 
 

 
#container-scroll-vert .item 
 
{ 
 
    width: 100%; 
 
    height: 20vh; 
 
    border: 1px solid purple; 
 
}

<div id="container-scroll-horiz"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div id="container-scroll-vert"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 2

HTML：

<div id="container-scroll-horiz"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

<div id="container-scroll-vert"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

的CSS：

html, body { 
    margin: 0; 
    height: 100%; 
} 

#container-scroll-horiz { 
    width: 100%; 
    height: 40px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
    border: 1px solid blue; 
    box-sizing: border-box; 
} 

#container-scroll-horiz .item { 
    display: inline-block; 
    width: 20vw; 
    height: 50px; 
    border: 1px solid black; 
} 

#container-scroll-vert { 
    width: 100%; 
    max-height: calc(100% - 40px); 
    overflow-x: hidden; 
    overflow-y: scroll; 
    border: 1px solid red; 
    box-sizing: border-box; 
} 

#container-scroll-vert .item { 
    width: 100%; 
    height: 20vh; 
    border: 1px solid purple; 
} 

Answer 3

這是因爲使用100%在設置垂直容器的最大高度，由於垂直容器沒有任何參考其高度，因此它將結合其子高度進行擴展。您可以使用100vh代替這種方式，它將使用視口高度限制窗口的最大可視高度。檢查我的答案，如果這是你想要實現你的代碼。古德勒克

#container-scroll-horiz 
 
{ 
 
    width: 100%; 
 
    height: 40px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    border: 1px solid blue; 
 
} 
 

 
#container-scroll-horiz .item 
 
{ 
 
    display: inline-block; 
 
    width: 20vw; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
#container-scroll-vert 
 
{ 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    border: 1px solid red; 
 
    max-height : calc(100vh - 60px); /* 40px plus 20px for horizontal scrollbar */ 
 
} 
 

 
#container-scroll-vert .item 
 
{ 
 
    width: 100%; 
 
    height: 20vh; 
 
    border: 1px solid purple; 
 
}

<div id="container-scroll-horiz"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div id="container-scroll-vert"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>