title: How to make sure div that contains span has size of div
body: <p>I would like to make sure that <em>div</em> that contains <em>span</em> is the size of the <em>span</em>, regardless of font used in <em>span</em>.</p>
  
  <p>Simple example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .boxName {
          display: block;
          position: relative;
          border: 1px solid yellow;
          min-height: 0%;
      }
      
      span {
          background-color: black;
          color: white;    
          font-size: 1vw;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="boxName"&gt;
       &lt;span&gt;title&lt;/span&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/vdp51ae9/15/" rel="nofollow noreferrer">Demo</a></p>
  
  <p>If you remove <em>font-size</em> from <em>span</em>, you will get <em>div</em> perfectly fit to <em>span</em>. Modifying <em>font-size</em> of <em>span</em> changes size of the <em>div</em> in not understandable (for me) manner.</p>
  
  <p>Any suggestions how to make sure that <em>div</em> is the size of <em>span</em>?</p>
  
  <p>Thank you!
  Marcin</p>