See this example: http://jsfiddle.net/vrgT3/5/

I made a 250x250px parent div with overflow: auto; so scrollbars appear when the content overflows the box. I have set a blue background to make it clear when the parent is visible.

Inside the parent is a child div with red background for visibility. It has 8px black borders and box-sizing: border-box; so padding and borders are included in computing the size of the box. The child div is set to min-height: 100% and min-width: 100%.

Expected result: Child div should be the exact same size as the parent, so no blue is shown and no scrollbars appear. The computed box size (content+padding+borders) should be 250x250px. There should be 8px black borders inlaying this, leaving a 234x234px red region.

Works with:

  • Midori 4.1 Ubuntu
  • Chromium 16 Ubuntu
  • Opera 11.61 Ubuntu

Issues with:

  • IE 8 WinXP: Horizontal and vertical scrollbars appear. The content is 249x266px with 8px borders giving a computed box size of 265x282px.

  • Firefox 3.6 WinXP: Vertical scrollbar appears. The content is 217x250px and computed box size is 233x266px.

  • Firefox 10 Ubuntu: Vertical scrollbar appears, content is 221x250px, computed box size is 237x266px.

I have checked caniuse.com and it appears that at least the browsers in question support the required min-height, min-width, and box-sizing. What gives?

Solution: As Marat suggested, this is indeed a browser bug. I've resolved a workaround utilizing JavaScript to add padding/margins to c

html css overflow
Edit
Report