Box model: lost parent element scrollbar

HTML & CSS
1

The first sample shows scrollbars correctly:

<!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:

<!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!

2

“Correctly” is a loaded term, and it’s best not to use it in this context. It’s better to say that you don’t see what you expect to see. What do you expect to see in the second example?

3

In the second example the margin right is over constrained and therefore treated ignored and therefore you will have no scrollbars.

The specs explain the exact behaviour but basically if there is no room for the right margin in its container (i.e. it is over constrained) then the right margin is ignored.

4

Many thanks for the informative answer! :slight_smile:
I just tested both examples in IE8 and the latest version of Opera and saw they ignore the bottom margin too – they show scrollbars in neither of the sample codes. Not sure if this is the right behavior according to specs or what other browsers do.

5

It only seems to be Opera that does that (ie9 in ie8 mode doesn’t do it but that may just be a quirk). Chrome, Firefox and IE9 all take notice of the bottom margin. It’s unclear from the specs (to me) what the exact behaviour should be for boxes with overflow other than visible but I would hazard a guess that Opera is incorrect here.