Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel