title: How to make parent element scale with child? (CSS transform)
body: <p>Consider the following: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;RequestAnimationFrame&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="outer"&gt;
          &lt;div class="inner"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="myscript.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.outer {
      border: 1px solid black;
      height: 500px;
      width: 500px;
  }
  
  .inner {
      border: 1px solid green;
      height: 300px;
      width: 300px;
      margin: 0 auto;
      transition: all 1s;
  }
  
  .inner:hover {
      transform: scaleY(4);
  }
  </code></pre>
  
  <p>As this code stands, hovering on the inner div will make it scale, but it will overflow the outer div. How can I force the outer div adjust its height based on the size of the inner div? </p>
  
  <p>My issue comes from a larger project where I'm trying to expand a div the 'right' way i.e only using transform. However, every method I've tried (using pseudo elements, putting the scale on both inner and outer divs etc.) is causing problems. A large part of this comes from one of my divs having a border-radius of 20px, and this border gets distorted when I scale, so I'm trying to apply the scale to an inner element and force the outer div to adjust accordingly... </p>
  
  <p>It would be great to know if this is possible, or if I should be trying to do this a different way...</p>