CSS overflow-y:scroll; missing something

Question

i have one problem with CSS overflow-y:scroll;

I have created this DEMO from codepen.io

In this demo you can see there is a left sidebar. And inside have 11 .layer div . but if you scrolling down from the left sidebar then you can see only 9 layer other 2 layers staying inside.

What is the problem in my CSS. What i need to do for fixed it ?

CSS

.container {
  -webkit-animation: cardEnter 0.75s ease-in-out 0.5s;
  animation: cardEnter 0.75s ease-in-out 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: block;
  position: absolute;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  max-width: 980px;
  min-width: 300px;
  margin-top: 75px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  background-color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;
  min-height: 140px;
}
.left{
  display: block;
  position: absolute;
  float: left;
  width: 30%;
  overflow: hidden;
  padding: 0px;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-right: 1px solid #d8dbdf;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left-header {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  background-color: red;
  color: #fff;
  height: 108px;
  position: relative;
}
.left-list {
  z-index: 999 !important;
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  opacity: 1;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideLeft;
  animation-name: slideLeft;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  background-color:red;
}
.list-layers {
  position: absolute;
  height: 100%;
  overflow-y: scroll;
}
.layer {
  float: left;
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #f7f7f7;
}

The div for class="left" has the overflow set to hidden. If your browser view height is shorter than the height of that container, anything below it will be hidden. You can quickly see what I mean by updating the overflow for .left to 'auto' rather than 'hidden' OR reduce the zoom in your browser to 50% or so and you'll see more of the list appear — Steve Hynding
– Steve Hynding, Commented Jun 4, 2015 at 17:19
@SteveHynding Thanks for your answer. But i try it now please check my demo again. And the .left-header is not to be stay on there when i scrolling down. The green area is for the header. — user4082764
– user4082764, Commented Jun 4, 2015 at 17:25
@humble.rumble also the green area will still be stay on there. — user4082764
– user4082764, Commented Jun 4, 2015 at 17:35
@SteveHynding i understood what mean but there is something wrong. Please see my demo again i need help about this regard. — user4082764
– user4082764, Commented Jun 4, 2015 at 17:38

user4639281 · Accepted Answer · 2015-06-04 17:57:38Z

1

Setting height: 100% sets the element's height to that of it's parent, if there is another element contained within the div then it will not take that into account. You can change this...

.left-list {
  position: relative;         
  width: 100%;
  height: 100%;
}

To this...

.left-list {
  position: absolute;
  top: 108px;
  bottom: 0;
}

And it which means that it will start 108px from the top of the containing block (or rather the closest ancestral non-static element) and end at the bottom of the containing block.

(Demo)

answered Jun 4, 2015 at 17:57

user4639281

Sign up to request clarification or add additional context in comments.

Comments

Majid Nayyeri · Accepted Answer · 2015-06-04 18:01:19Z

0

change your .left class like this:

change overflow: auto to overflow: visible and bottom: 0 to bottom: 40%

actually it should change into:

.left{
display: block;
position: absolute;
float: left;
width: 30%;
overflow: visible;
padding: 0px;
bottom: 40%;
top: 0px;
left: 0px;
background-color: #FFF;
border-right: 1px solid #D8DBDF;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s ease 0s, width 2s ease 0s, left 2s ease 0s, font-size 2s ease 0s, color 2s ease 0s;
}

answered Jun 4, 2015 at 18:01

Majid Nayyeri

4444 silver badges15 bronze badges

Collectives™ on Stack Overflow

CSS overflow-y:scroll; missing something

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related