CodingForums.com - Box model: lost parent element scrollbar

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Box model: lost parent element scrollbar (http://www.codingforums.com/showthread.php?t=281167)

Box model: lost parent element scrollbar

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!

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

Quote:

Originally Posted by stephen_ (Post 1289266)

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

Not the answer to my question.

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.