div with overflow hidden containg large divs overflows

@jalarieOct 10.2016

I have a div of a specified height, with overflow hidden, that contains multiple divs which also have specified heights. The heights of the contained divs add up to more than the height of the main div, and I want them to be cut off, but they expand the size of the main div. Can anyone explain how to cut them off?

to post a comment

CSS

@Kevin2Oct 10.2016 — #This works:

[code=html]<!DOCTYPE html>
 <title>div overflow</title>
 <style>
 #main {
 height: 350px;
 overflow: hidden;	/* Change to overflow-y: scroll; if you want a scrollbar */
 }
 #main div { height: 100px; }
 #blue { background-color: blue; }
 #red  { background-color: red; }
 #green { background-color: green; }
 #yellow { background-color: yellow; }
 </style>
 
 <div id="main">
 <div id="blue"></div>
 <div id="red"></div>
 <div id="green"></div>
 <div id="yellow"></div>
 </div>[/code]

@jalarieauthorOct 11.2016 — #That worked fine (Thank you.) until I added borders and repositioned the divs. Hmmm.

@cootheadOct 11.2016 — #Hi there jalarie,

[indent]

we really need to see your problematic code. ?

[/indent]

[i]coothead[/i]

@Kevin2Oct 11.2016 — #That worked [ ... ] until I added borders and repositioned the divs.[/QUOTE]

Replace the CSS in my previous code with this and see what you think:

#main {
 position: relative;
 height: 450px;
 background-color: #ccc;
 overflow-y: scroll;
 }
 #main div {
 position: absolute;
 height: 100px;
 width: 100px;
 border: 3px solid #fff;
 }
 #blue {
 top: 0;
 left: 0;
 background-color: blue;
 }
 #red  {
 top: 125px;
 left: 125px;
 background-color: red;
 }
 #green {
 top: 250px;
 left: 250px;
 background-color: green;
 }
 #yellow {
 top: 375px;
 left: 375px;
 background-color: yellow;
 }

This assumes you are positioning the contained elements with [B]position: absolute;[/B]. If this is not the case, follow coothead's suggestion. ?

@jalarieauthorOct 11.2016 — #This is embarassing. I put together a minimal example of what does not work and it worked. I redid the original and that worked. Sorry.

@shibli2700Oct 12.2016 — #Try making the height of the outer div responsive

div with overflow hidden containg large divs overflows

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

div with overflow hidden containg large divs overflows

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴