title: Child div causes parent div to occupy whole page width
body: <p>I am trying to create a div whose width changes based on text inside.</p>
  
  <p>The parent div width is auto and child div  width is set to 100% which is the percent of parent div's width.</p>
  
  <p>But the parent div occupies the whole page width. How can I maintain the minimum width of div to have the whole text in a single line while dynamically changing the text length.</p>
  
  <p>Here is the  implementation</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>.filled-no-icons {
      border-width:0px;
      position:relative;
      padding:0px;
      width:auto;
      height:auto;
      min-width:91px;
      min-height:36px;
      background-color:rgba(0,0,0,0);
  }
  .filled-no-icons .rectangle-3 {
  border-width:1px;
  position:absolute;
  padding:0px;
  width:100%;
  height:100%;
  min-width:91px;
  min-height:36px;
  border-radius:4px 4px 4px 4px ;
  background-color:rgba(0,150.0,136.0,255);
  left:0%;
  top:0%;
  }
  .filled-no-icons .content {
      border-width:0px;
      position:absolute;
      padding:0px;
      width:calc(100% - 32px);
      height:17px;
      min-width:59px;
      min-height:17px;
      background-color:rgba(0,0,0,0);
      left:16px;
      top:calc(50% - 8.5px);
  }
  .filled-no-icons .content .label {
      border-width:1px;
      position:absolute;
      padding:0px;
      width:calc(100% - 0px);
      height:17px;
      min-width:59px;
      min-height:17px;
      color:rgba(255,255,255,255);
      font-family:Roboto-Medium;
      font-size:14px;
      font-weight:500;
      letter-spacing:0.75px;
      line-height:16.40625px;
      left:0px;
      top:calc(50% - 8.5px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
              &lt;title&gt;
                  Button test
              &lt;/title&gt;
              &lt;meta charset="UTF-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div class="filled-no-icons"&gt;
          &lt;div class="rectangle-3"&gt;&lt;/div&gt;
          &lt;div class="content"&gt;
            &lt;div class="label"&gt;Button&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Edit:</strong> Adding jsfiddle link</p>
  
  <p><a href="https://jsfiddle.net/3owturhc/" rel="nofollow noreferrer">https://jsfiddle.net/3owturhc/</a></p>