为什么溢出-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>