Hobbyist Hobbyist - 5 months ago 24
HTML Question

Why will overflow-x work, but overflow-y not?

In the example provided, the horizontal scroll container scrolls left and right as it should, while the vertical scroll container expands the page off the screen while not allowing for any scrolling. The scroll bar appears, but it is disabled.

The idea is to have the Vertical scroll container cover the remainder of the screen after the Horizontal scroll container.

Considering the Horizontal container is 40px high in this example, I set the max-height to the vertical container as

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

Because the vertical scroll's element has nothing to set its 100% height against.

When using percent on an element's height, its parent need a fixed height.

If all parents use percent, it need to be passed on all the way up to the body, which will use the viewport's fixed height.

You can either

  • use viewport units, max-height: calc(100vh - 40px); (sample 1)
  • set a height on the body, html, body { height: 100%; } (sample 2)

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

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

Comments