Scrollbar Of A Bottom Div Appears Only When The Viewport Is Smaller Than This Div, Regardless Of The Another Div At The Top

scrollbar of a bottom div appears only when the viewport is smaller than this div, regardless of the another div at the top

Contents hide

1 scrollbar of a bottom div appears only when the viewport is smaller than this div, regardless of the another div at the top

2 Solution – 1

Problem Description:

I’d like to have header with some flex items in it, meaning the header will have variable height
and then, beneath, I’d like to have a scrollable area that covers the exactly the rest of the browser viewport.

I made some attempts with the following code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/"
</head>
<body style="height:100vh;overflow:hidden">
    <div>
      Variable height
      <hr><hr><hr><hr><hr><hr><hr>
    </div>

    <div style="height:100%">
      object
      <div style="height:100%;overflow-y:scroll">
        <ul>
          <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
          <li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li>
          <li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
        </ul>
      </div>
    </div>
</body>
</html>

but then, when I resize my browser with a smaller height, the scrollbar does not appear when I would expect it to do so:
instead of appearing as long as the lower div is partially clipped out, the scrollbar appears only when the part that is clipped out has the same height as the header.
This problem occurs in chrome and firefox, so I guess I’m not using style properly.

why is it so? why the height of the header has some impact about the overflow of the second div?
is there a proper way to achieve my initial goal, possibly using another way?

Solution – 1

Some browsers might put padding or margins in the html and/or body elements, which affects other elements when you try using percentages relative to the viewport dimensions.

I always clear them out.

sample:

html, 
body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex-grow: 0;
  display:flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  flex-wrap: wrap;
}

.header > div {
  padding: 6px;
  flex: 1 1;
}

.scroll-box {
  flex-grow: 1;
  overflow: auto;
  padding: 6px;
}

<div class="container">
    <div class="header">
        <div>Variable height</div>
        <div>Variable height</div>
        <div>Variable height</div>
        <div>Variable height</div>
        <div>Variable height</div>
        <div>Variable height</div>
        <div>Variable height</div>
        <div>Variable height</div>
        <div>Variable height</div>
    </div>
    <div class="scroll-box">
        <ul>
          <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
        </ul>
    </div>
</div>

Rate this post