Is it bug in WebKit with min-width? - html

Question

I was struggling with weird rendering of my web site header for hour or so and it looks like there is the bug in WebKit (e.g. latest Chrome). It is bug? Or am I missing something?
Here is the http://jsfiddle.net/y415st6s/
I expect a separator to appear between Site Title and Page Title, but get only its border overflowing over the site title. I'm using min-width to set width of block with "Site title" and I noticed it works fine at least in FireFox and IE. In WebKit it looks like inner padding is not accounted in external dimensions of the block with min-width. The problem seems to disappear when 'width' is also set to the same value (see line #28 in jsfiddle CSS).
According to https://developer.mozilla.org/en-US/docs/Web/CSS/min-width setting just min-width should override 'width' too, so it seems I'm doing it the right way.
Staff for copy/pasting ...
HTML
<header class="siteHeader hstackpanel">
<div>
<div class="siteHeader__logoArea hstackpanel">
<div class="siteHeader__logoIcon">
<img src="http://static.flaticon.com/png/16/1394.png">
</div>
<div class="siteHeader__logoText hstackpanel-autofit">Site Title</div>
<div class="siteHeader__logoButtons">
<img src="http://static.flaticon.com/png/16/9916.png">
<img src="http://static.flaticon.com/png/16/57164.png">
</div>
</div>
</div>
<div>
<!-- box with blue border -->
<div class="siteHeader__splitter"></div>
</div>
<div class="hstackpanel-autofit">
<div class="siteHeader__titleArea hstackpanel">
<div class="hstackpanel-autofit">
<div class="siteHeader__titleAreaText hstackpanel hstackpanel-autofit">
<span class="siteHeader__pageTitleText">Current Page Title</span>
</div>
</div>
<div>
<div class="siteHeader__titleAreaButtons hstackpanel"></div>
</div>
</div>
</div>
</header>
CSS
* {
box-sizing: border-box;
}
.hstackpanel {
display: table;
width: 100%;
}
.hstackpanel > div {
display: table-cell;
position: relative;
vertical-align: middle;
padding: 2px;
}
.hstackpanel > div:not(.hstackpanel-autofit) {
white-space: nowrap;
width: 0.01px;
}
img {
width: 16px;
height: 16px;
}
.siteHeader {
background: yellow;
n_height: 24px;
}
.siteHeader__logoArea {
min-width: 270px;
/* width: 270px; */
padding: 4px 8px;
background: green;
}
.siteHeader__splitter {
border: 1px solid blue;
width: 8px;
height: 24px;
}
.siteHeader__titleArea {
padding: 4px 8px;
background: green;
}

Answer 1

Chrome and Safari do not support the min-width property on table elements. They will, however, respect min-width when applied to table cells. You're applying display: table to the .htstackpanel div.