Issue with box-sizing border-box and min-width in

Question

I'm using the box-sizing:border-box model. When an inline-block element with a min-width is contained in an inline-block element (container), the container is too wide in Internet Explorer 9. Works as expected in FF 10.0, Chrome 17.0, Opera 11.5 and Safari 5.1.2.

See this jsfiddle

By the way, width instead of min-width works like a charm.

Any ideas?

Answer 1

I don't have a solution for this, but came across the question while googling for a fix myself. Fortunately, in my case, I'm able to get by for now with setting the width instead of min-width, although that might be a problem in the future.

Anyway, I just wanted to add that the same problem exists if the min-width element and its container are both floated instead of inline-block, as well.

Here's an update to the original fiddle showing it with float: left: http://jsfiddle.net/5Ng7k/24/

Answer 2

Hi came across your post when Googling for a similar issue with IE 8, although IE 8 supports box-sizing and min-height/width, from my tests, it seems IE 8 ignores border-box when using min-height/width on the same element

E.g.

#box {
   min-height: 20px;
   padding:4px;
   box-sizing:border-box;
}

IE 8 height = 28px, Chrome 20 height = 20px;

Solution using css browser selectors http://rafael.adm.br/css_browser_selector/

#box {
       min-height: 20px;
       padding:4px;
       box-sizing:border-box;
  }

 .ie8 #box, .ie9 #box {
       min-height: 12px;
       padding:4px;

 }

Answer 3

My Issue

I see the border-box value being applied in IE8 developer tools inspector. Therefore, I know border-box is working, especially as expected when width(or height) is set. But since I am using min-height for my height (and OP is using min-width), my min value is not working. The issue is therefore:

IE's min-height/min-width does not factor in border-box

.box {
     padding: 30px;
     box-sizing: border-box;
     min-height: 200px;
}    

<div class="box">Awesome Box</div>

• IE8: 260px (30px from padding top and 30px from padding bottom). Does not work.
• FireFox: 200px height. (min's factor in border-box). Works.

My solution:

Don't put the padding on the same element as you put the min-values AND the border-box - (you may not need border-box sizing anymore if you separate these).

.box {
     box-sizing: border-box;
     min-height: 200px;
}
.box-inner {
     padding: 30px;
}  

<div class="box">
    <div class="box-inner">Awesome Box</div>
</div>