为什么overflow-x会工作，但溢出不是吗？

Question

在提供的示例中，水平滚动容器按原样向左和向右滚动，而垂直滚动容器将页面从屏幕上展开而不允许任何滚动。滚动条出现，但已禁用。

想法是让垂直滚动容器覆盖水平滚动容器之后的屏幕的其余部分。

在此示例中考虑到Horizo​​ntal容器高40px，我将max-height设置为垂直容器为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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

样本2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为在设置垂直容器的max-height时使用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>

Answer 3

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