title: Is it bug in WebKit with min-width?
body: <p>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?</p>
  
  <p>Here is the <a href="http://jsfiddle.net/y415st6s/" rel="nofollow noreferrer">http://jsfiddle.net/y415st6s/</a></p>
  
  <p>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).</p>
  
  <p><img src="https://i.stack.imgur.com/yDJXD.png" alt="enter image description here"></p>
  
  <p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/min-width</a> setting just min-width should override 'width' too, so it seems I'm doing it the right way.</p>
  
  <p>Staff for copy/pasting ...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header class="siteHeader hstackpanel"&gt;
      &lt;div&gt;
          &lt;div class="siteHeader__logoArea hstackpanel"&gt;
              &lt;div class="siteHeader__logoIcon"&gt;
                  &lt;img src="http://static.flaticon.com/png/16/1394.png"&gt;
              &lt;/div&gt;
              &lt;div class="siteHeader__logoText hstackpanel-autofit"&gt;Site Title&lt;/div&gt;
              &lt;div class="siteHeader__logoButtons"&gt;
                  &lt;img src="http://static.flaticon.com/png/16/9916.png"&gt;
                  &lt;img src="http://static.flaticon.com/png/16/57164.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;!-- box with blue border --&gt;
          &lt;div class="siteHeader__splitter"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="hstackpanel-autofit"&gt;
          &lt;div class="siteHeader__titleArea hstackpanel"&gt;
              &lt;div class="hstackpanel-autofit"&gt;
                  &lt;div class="siteHeader__titleAreaText hstackpanel hstackpanel-autofit"&gt;
                      &lt;span class="siteHeader__pageTitleText"&gt;Current Page Title&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;div class="siteHeader__titleAreaButtons hstackpanel"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
      box-sizing: border-box;
  }
  .hstackpanel {
      display: table;
      width: 100%;
  }
  .hstackpanel &gt; div {
      display: table-cell;
      position: relative;
      vertical-align: middle;
      padding: 2px;
  }
  .hstackpanel &gt; 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;
  }
  </code></pre>