Box model: lost parent element scrollbar

Rain Lover · 11-06-2012, 06:38 AM

The first sample shows scrollbars correctly:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#parent {width:102px; height:101px; background:red; overflow:auto;}
#child {width:100px; height:100px; margin:1px; background:green;}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>

But the second doesn't:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#parent {width:101px; height:102px; background:red; overflow:auto;}
#child {width:100px; height:100px; margin:1px; background:green;}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>

Why is that?
Thanks!

stephen_ · 11-06-2012, 01:12 PM

Use scroll on the overflow rather than auto?
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Rain Lover · 11-06-2012, 05:47 PM

Quote:

Originally Posted by stephen_

Use scroll on the overflow rather than auto?
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Not the answer to my question.

Excavator · 11-06-2012, 06:01 PM

Hello Rain Lover,
It's as if overflow: auto; does not recognize that 1px of margin as overflow, but only when it adds to the width. How weird is that?

I'm watching this thread to see if any of the smart guys on this forum have any idea what's going on.