Inner Divs overflow Outerdiv

Question

I am dynamically creating multiple divs inside a div. I want all these inner divs to avoid overflowing from the outer div. I have attached jsfiddle to reproduce the problem.

https://jsfiddle.net/t3jgdodm/1/

attaching CSS:

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 100px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  max-height: inherit;
  overflow-y: auto;
}

I want all divs to be under single scroll. I am using multiple divs as each div represents a new entered keyword and the div will dynamically generate inside the outer div. I am ready to change the div element into other HTML element if the problem if due to div element.

score 2 · Answer 1 · answered Nov 11 '16 at 15:56

2

Is this what your trying to do?

https://jsfiddle.net/t3jgdodm/2/

#topDiv {
    background-color: lightblue;
    max-height: 100px;
    width: 100%;
    padding: 10px;
   overflow-y: scroll;
}

i added overflow-y: scroll to you #topDiv element id

answered Nov 11 '16 at 15:56

Snaterj

21
2

1

I feel like it's important to note that OP is using the same ID for multiple elements. – Tyler Roper Nov 11 '16 at 16:00
Thanks for your quick response. If I want these multiple divs to have a common scroll bar with that of the outer div scroll, then should I have to use some other element than div. If yes, which element will be prefered? @Snaterj – timekeeper Nov 11 '16 at 16:06
Divs are fine to use. It's that you can't have identical ID's. You need to use *classes*, as I've outlined in my answer. – Tyler Roper Nov 11 '16 at 16:09
@Santi updated fiddle https://jsfiddle.net/t3jgdodm/12/ How to use only scroll bar of the outer div instead of each divs having their scroll bar. – timekeeper Nov 11 '16 at 16:26
@AayushKumarSingha Again, please see [my answer below](http://stackoverflow.com/a/40551589/2026606). It includes all of these answers and a working example. – Tyler Roper Nov 11 '16 at 16:31

Tyler Roper · Accepted Answer · 2016-11-11T16:09:48.247

1

Important note: You're using repeating ID's which is completely taboo. Make them classes if you plan on re-using them, as I have in my example below.

To have a scrollbar on the outer div, put overflow: auto on your #topDiv instead of your .insideDiv. https://jsfiddle.net/t3jgdodm/11/

#topDiv {
  background-color: lightblue;
  max-height: 100px;
  width: 100%;
  padding: 10px;
  overflow: auto;
  box-sizing: border-box;
}

.insideDiv {
  background-color: pink;
}

I've added a box-sizing: border-box; to #outerDiv so that the padding: 10px + width: 100% doesn't cause it to flow off the screen.

Also, I've removed max-height from .innerDiv to avoid having them overlap.

edited Nov 11 '16 at 16:09

answered Nov 11 '16 at 15:53

Tyler Roper

21,445
6
33
56

You missed the middle div by the way, still has id="insideDiv" on it instead of class="insideDiv", no idea why this has been marked down though, first to answer and gave a good one at that. – DibsyJr Nov 11 '16 at 16:08
@Santi Why does class and id behaves differently? I have never came across like this problem due to id and class naming. – timekeeper Nov 15 '16 at 18:58
Here's a good answer with a lot of information on why not to use repeating ID's: http://stackoverflow.com/a/8753329/2026606 – Tyler Roper Nov 15 '16 at 19:36

score 1 · Answer 3 · answered Nov 11 '16 at 15:56

Just remove the max-height: inherit from the #insideDiv (it's inheriting the max-height: 100px from it's parent) and move the overflow-y: auto to the #topDiv.

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 100px;
  width: 90%;
  padding: 10px;
  overflow-y: auto;
}

#insideDiv {
  background-color: pink;
}

In your exact fiddle, the scrollbar gets pushed off the edge. That's just because the width of the #topDiv exceeds 100% (you need to add box-sizing: content-box to prevent that).

Also, probably just in your example, but remember you shouldn't have more than one element with any given ID. Use a class instead.

DibsyJr · Answer 4 · 2016-11-11T16:02:24.593

The problem is you have multiple divs with the same id, make that id a class first of all, secondly you have max-height: inherit on the insidediv, all this means is they get the max-height from the parent, so they'll have the same max-height as the topDiv, with no real restriction. The only real ways I can think of to fix this are to either put an overflow: auto on the outer div or somehow work out what the height of the insidedivs should be.

So to simplify, the HTML should be more like:

<div id="topDiv">
  <div class="insideDiv">
    Some inside content
    <br> More inside content
    <br> More inside content
    <br>
  </div>
  <div class="insideDiv">
    <br>check
    <br>check
  </div>
  <div class="insideDiv">
    <br>check
    <br>check
  </div>
</div>

and the CSS should be more like:

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 100px;
  width: 100%;
  padding: 10px;
  overflow-y: auto;
}

.insideDiv {
  background-color: pink;
  overflow-y: auto;
}

Or completely remove the overflow-y from the insideDiv class and keep it on just the topDiv id.

score 0 · Answer 5 · answered Nov 11 '16 at 15:56

The problem was with max height attribute. I changed the css to height.

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  height: 100px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  height: 33%;
  overflow: scroll;
}

score 0 · Answer 6 · answered Nov 11 '16 at 15:58

I wanted to give a proper answer for your issue.

Don't control overflow with the child (#innerDiv), control it with the parent (#topDiv). You don't tell water where to go, you put in a different-sized glass.

Here's an example:

<div id="parent">
  <div>
      Some inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br>
  </div>
</div>


#parent {
  background-color: lightblue;
  max-height: 100px;
  overflow-y: scroll;
}

score -2 · Answer 7 · answered Nov 11 '16 at 15:57

-2

remove "max-height: 100px" from topDiv. It will work

answered Nov 11 '16 at 15:57

samnu pel

914
5
12

Inner Divs overflow Outerdiv

7 Answers7