title: CSS Scale transform on child not affecting parent size
body: <p>I have a component that is too large and I want to shrink it down. I'm able to do so with a scale transform, but the parent container doesn't shrink to fit. </p>
  
  <p>In my real code, the div with the SHRINK-ME class is actually an Angular calendar component, but this simplified <a href="https://codepen.io/esoyke/pen/yvzLyg" rel="noreferrer">repo</a> reproduces the same effect. I can't just scale the wrapping parent div as I need to use the Bootstrap column grid classes to accommodate objects omitted from this example. Am I missing a simple CSS property here?</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>.parent {
    background-color: green;
  }
  
  .parent .child-object {
    height: 10em;
    background-color: red;
  }
  
  .sibling {
    background-color: yellow;
  }
  
  .SHRINK-ME {
    transform: scale(.80) translate(-12.5%, -12.5%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='row no-gutters'&gt;
    &lt;div class='parent col-vs-12 col-sm-6'&gt;
      &lt;div class='child-object SHRINK-ME'&gt;CHILD&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='sibling col-vs-12 col-sm-6'&gt;SIBLING&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My code with and without the transform:</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>.parent {
    background-color: green;
    width: 40%;
  }
  
  .parent .child-object {
    height: 10em;
    background-color: red;
  }
  
  .sibling {
    background-color: yellow;
  }
  
  .SHRINK-ME {
    transform: scale(.80) translate(-12.5%, -12.5%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='row no-gutters'&gt;
    &lt;div class='parent col-vs-12 col-sm-6'&gt;
      &lt;div class='child-object'&gt;CHILD&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='sibling col-vs-12 col-sm-6'&gt;SIBLING&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br&gt; Don't want to see the green parent div, want it to shrink as child is scaled down..
  
  &lt;div class='row no-gutters'&gt;
    &lt;div class='parent col-vs-12 col-sm-6'&gt;
      &lt;div class='child-object SHRINK-ME'&gt;CHILD&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='sibling col-vs-12 col-sm-6'&gt;SIBLING&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>