CODEWITHSUNDEEP
htmlcssscroll
Leon Gaban
Leon Gaban

Reputation: 39018

Why does the contained div not scroll?

FIDDLE

enter image description here

The content of the pink div should be scrolling, the overflow-y is set to auto for my #scroll_screen Not sure why it isn't behaving as expected in my jsfiddle.

Any thoughts, apparent mistakes? Thanks!

HTML

<body>
  <h4>content in pink box should scroll</h2>
  <div id="container">
  <div id="sidebar"></div>
  <div id="content">
    <div id="scroll_screen">

      <div class="scroll_box">
          Scroll Box 1 | Copy 1 {stuff 1}
      </div>

      <div class="scroll_box">
          Scroll Box 2 | Copy 2 {stuff 2}
      </div>

      <div class="scroll_box">
          Scroll Box 3 | Copy 3 {stuff 3}
      </div>

      <div class="scroll_box">
          Scroll Box 4 | Copy 4 {stuff 4}
      </div>

      <div class="scroll_box">
          Scroll Box 5 | Copy 5 {stuff 5}
      </div>

    </div>
  </div>
</div>
</body>

CSS

#content {
    float: right;
    width: 79%;
    //height: auto;
    background: #f8f8f8;
}

#scroll_screen {
    overflow-y: auto;
    //overflow-y: scroll;
    background: pink;
}

.scroll_box {
    margin-bottom: 20px;
    width: 300px;
    height: 45px;
    color: white;
    background: red;
}

Upvotes: 1

Views: 57

Answers (2)

user3114757
user3114757

Reputation: 41

It's in #content where you should put the overflow-y:scoll or auto stuff And your .scroll_box width should be in %, otherwise you will get a horizontal scrollbar.
The overflow-y should not be in the container... then the sidebar will scroll along
If you want it to, the other answer is right

http://jsfiddle.net/7Awzz/

#content {
float: right;
width: 79%;
height: 100%;
background: #f8f8f8;
overflow-y: auto; 
}


#scroll_screen { 
}

.scroll_box {
margin-bottom: 20px;
width: 100%;
height: 45px;
color: white;
background: red;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240878

Use overflow: auto as opposed to overflow: hidden on the parent, #container.

jsFiddle example

#container {
  overflow: auto;
  margin: 20px 20px 0 0;
  width: auto;
  height: 200px;
  background: #ccc;
  border: 1px solid #666;
}

Upvotes: 2

Related Questions