I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%.
With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundaries instead of overflowing when the parent container is too small.
While I have successfully implemented this in ie9, Firefox, and Chrome, I encountered an issue with IE8 standards mode where the padding seems to be included in the max-width calculation.
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<style>
#test
{
border: 1px blue solid;
width: 100%;
max-width: 210px;
display: block;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<span id="test"></span>
</body>
This sets up a box that is a maximum of 210px wide on IE9, Firefox, and Chrome. However, in IE8, the added border causes the actual width to be 212px instead of the intended 210px. Removing the border reverts back to the desired width in IE8.
Although I tried changing the box-sizing property to content-box, there was no noticeable impact on how the box behaves.