Bordered element with display:table extends out of parent

Question

This code seems to have a different effect in each browser.

.container {
    display: inline-block;
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.box {
    display: table;
    width: 10px;
    height: 10px;
    background-color: red;
    border: 5px solid blue;
}

<div class="container">
    <div class="box"></div>
</div>

In Chrome 43.0, the table is not confined to the container:

In Safari 5.1, the border completely overlaps the table because it seems to interpret the width as inclusive of the border width:

In Firefox 38.0 and Internet Explorer 11.0, the table renders correctly:

The ideal would be that all browsers behave similar to Firefox/Internet Explorer.

Using box-sizing: border-box and increasing the width of .box to include the width of the border makes all browsers show the Firefox/Internet Explorer version, but assuming that the width of the border is unknown, is there any way to make all major browsers render the model according to Firefox/Internet Explorer (without using JavaScript)?

The following doesn't help at all:

• Using table-layout: fixed on the .box.
• Using border-collapse: separate on the .box
• Using box-sizing: content-box on the .box
• Using <table> instead of display: table (This just makes Chrome's preview look the same as Safari's and I would prefer to not use a table element.)

_{This issue seems to be similar to Chrome vs. box-sizing:border-box in a display:table, but that problem was already fixed.}

---

Just for frame of reference:

That was all just a minimal example demonstrating the same problem. The actual issue is that I have a <div> with display: table that will have its width only defined by the width of its cells (which is equal to the height of the cells) and the padding between them. That div also happens to have a border. That div is contained by another element that is floated to the right. However, because of this problem, when the floated container is completely on the right, the div overflows off the screen.

Answer 1

Set box-sizing: border-box to .box and then give it a size to .box taking in count it border-width

Like this:

.container {
    display: inline-block;
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.box {
    display: table;
    width: 20px;
    height: 20px;
    background-color: red;
    border: 5px solid blue;
    box-sizing:border-box;
}

<div class="container">
    <div class="box"></div>
</div>

The behavior that you have is because .container is adjusting to the content of .box and the default value of box-sizing is content-box so the border are being left out.

Added another solution because the above solution requires the border width to be known beforehand

Trying set display: table-cell to the content inside of .box

.container {
    display: inline-block;
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.box {
    display: table;
    border: 5px solid blue;
}

.cell {
    display: table-cell;
    width: 10px;
    height: 10px;
    background-color: red;
}

<div class="container">
    <div class="box">
        <div class="cell"></div>
    </div>
</div>

Answer 2

You can add in the .container : width: 20px