title: box-sizing: border-box - Size not maintained if border is changed afterwards
body: <p>I'm stuck with a problem using <code>box-sizing: border-box</code>: I've 3 <code>div</code> sized with <code>min-height: 24px</code> I'd like to maintain the height whatever it is when adding horizontal borders.</p>
  
  <p>The problem is that if horizontal borders are added <em>after</em> the content height has been computed once, then the content height isn't changed, and the <code>div</code> grows by the value of the borders.</p>
  
  <p>In my case, borders are added by CSS itself when the element is hovered.</p>
  
  <p><a href="https://i.stack.imgur.com/A2Lul.png" rel="nofollow"><img src="https://i.stack.imgur.com/A2Lul.png" alt="enter image description here"></a><br>
  <sub>Height of first <code>div</code> increases when hovered, increasing the height of the whole page</sub> ↑<BR></p>
  
  <p>In case this is relevant:</p>
  
  <ul>
  <li><p>The page is actually used as a popup in a <a href="https://developer.mozilla.org/en/Add-ons/WebExtensions" rel="nofollow">Firefox webextension</a>.</p></li>
  <li><p>I'm using two style sheets, one which I cannot modify (<code>extension.css</code>) and one I use to extent and overwrite the first one (<code>page-small.css</code>).</p></li>
  <li><p>One style is applied to each of the <code>div</code> to overwrite <code>height: 24px</code> in the protected CSS by <code>min-height: 24px;</code> to allow for the elements to grow with the content.</p></li>
  </ul>
  
  <p>How can I manage this growth without having the external size changing when the element is hovered?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.no-wrap {
    white-space: nowrap;
  }
  .addl-text {
    padding-left: 1em;
  }
  .start {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  #col-1 {
    max-width: 300px;
  }
  #pli-1,
  #pli-2,
  #pli-3 {
    height: unset;    /* Want to cancel effect of...        */
    min-height: 24px; /* ...'height: 24px' in extension.css */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="https://hg.mozilla.org/mozilla-central/raw-file/4f41a072c0ca/browser/components/extensions/extension.css"&gt;
    &lt;link rel="stylesheet" href="page-small.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="col-1" class="panel-section"&gt;
      &lt;fieldset class="panel-section-list"&gt;
        &lt;legend&gt;Checkboxes&lt;/legend&gt;
        &lt;div id="pli-1" class="panel-list-item"&gt;
          &lt;div class="start"&gt;
            &lt;input id="c11" type="checkbox"&gt;
            &lt;label class="no-wrap" for="c11"&gt;Test&lt;/label&gt;
            &lt;label class="addl-text" for="c11"&gt;Voluptate nisi expe tendis eiusmod firmissimum de cillum nam eiusmod firmis simum expetendis, ipsum offendit.&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel-section-separator"&gt;&lt;/div&gt;
        &lt;div id="pli-3" class="panel-list-item"&gt;
          &lt;input id="c12" type="checkbox"&gt;
          &lt;label class="no-wrap" for="c12"&gt;Test&lt;/label&gt;
        &lt;/div&gt;
        &lt;div id="pli-2" class="panel-list-item"&gt;
          &lt;input id="c13" type="checkbox"&gt;
          &lt;label class="no-wrap" for="c13"&gt;Test&lt;/label&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>