overflow-y either auto or scroll bar does not allow showing all overflow content

Question

I have a dummy screen with background image. The background image correctly expands or contracts with the size of the viewport. I have dummy flexbox content that I intentionally make overflow the bottom of the page. The scrollbar correctly appears, but it will not scroll far enough to show all the content that overflowed. Apologies: the content is varied so I can tell what IS NOT showing. Dummy header menu bar is fine.. it is supposed to scroll up - and it does.

CSS:

    html  {
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
  overflow-y: auto;
  min-height: 100vh;
  width: 100%;

  margin: 0; padding: 0; border: 0; cursor: default
}

ul {
  list-style: none;

  li {
    display: inline;
    margin-left: 50px;
    margin-top: 50px;
  }
}

.blockStyleEven {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: space-evenly;
}

.blockSpaceAround {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: space-around;
}

.blockSpaceBetween {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: space-between;
}

.blockStart {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: flex-start;
}

.blockEnd {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: flex-end;
}

.blockCenter {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
}

.maroon {
  width: 100px;
  height: 100px;
  background-color: maroon;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
}

.green {
  width: 100px;
  height: 100px;
  background-color: green;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.workspace {
  background: url("././Features.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  h1 {
    color: #E0B228;
  }

  h2 {
    color: #2856E0;
  }
}

HTML:

<div [ngStyle]="{'width': '100vw', 'height': '100vh'}">
  <div [ngStyle]="{'display': 'flex', 'flex-direction': 'column'}">
    <div [ngStyle]="{'background-color': 'beige'}">
      <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
      </ul>
    </div>
    <div  class="workspace">
      <div class="blockStyleEven">
        <div class="maroon">space-evenly</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceAround">
        <div class="maroon">space-around</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceBetween">
        <div class="maroon">space-between</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockStart">
        <div class="maroon">start</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockEnd">
        <div class="maroon">end</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockCenter">
        <div class="maroon">center</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockStyleEven">
        <div class="maroon">space-evenly</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceAround">
        <div class="maroon">space-around</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceBetween">
        <div class="maroon">space-between</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockStart">
        <div class="maroon">start</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockEnd">
        <div class="maroon">end</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockCenter">
        <div class="maroon">center</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
    </div>
  </div>
</div>

Thanks in advance. Yogi

have you looked at this thread? https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container — philr, Jan 15 '18 at 21:07
no I don't style every line by hand, but I can copy and paste a dumb example really fast without any effort. — Yogi Bear, Jan 15 '18 at 22:17
Give me a hint: I know how to make a plnkr but how do I link it to this question... just save it to some link and put the link here in the comments?? Or does stackoverflow have a way? Yogi — Yogi Bear, Jan 15 '18 at 23:04

score 0 · Answer 1 · answered Jan 15 '18 at 23:11

0

Finally figured it out. The problem was the scrollbar was "too short" to show all the content. This was because my workspace class was on a div below the dummy menu bar. When I put the workspace (containing Margin: auto) on the outer move div, it worked perfectly. Thanks for all your help. Apologies for the earlier poor formatting, which has now been cleaned up. Yogi

answered Jan 15 '18 at 23:11

Yogi Bear

943
2
16
32

so just add margin:auto? – john k Apr 08 '19 at 00:01

overflow-y either auto or scroll bar does not allow showing all overflow content

1 Answers1