title: scaling a centered div in a scrollable container
body: <p>I'm trying to do a scale transformation on a div that is centered on a scrollable container div.</p>
  
  <p>The trick i'm using to reflect the new div size after transformation, is using a wrapper and setting the new width/height to it so the parent can show the scrollbars correctly.</p>
  
  <pre><code>.container {
      position: relative;
      border: 3px solid red;
      width: 600px; height: 400px;
      background-color: blue;
      overflow-x: scroll; overflow-y: scroll;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
  .wrapper {
      order: 1;
      background-color: yellow;
  }
  .content-outer {
      width: 300px;
      height: 200px;
      transform-origin: 50% 50%;
      /*transform-origin: 0 0;*/
  }
  .content-outer.animatted {
      animation: scaleAnimation 1s ease-in forwards;
  }
  .content-outer.animatted2 {
      animation: scaleAnimation2 1s ease-in forwards;
  }
  .content-inner {
      width: 300px;
      height: 200px;
      background: linear-gradient(to right, red, white);
  }
  </code></pre>
  
  <p>if the transformation origin was 0,0 the div is centered without animation jumps but the scrollbars are not correct. if the origin was in the middle both the div location and scrollbars are missed up</p>
  
  <p>I have tried two ways to do the centering, using flexbox (<a href="http://jsfiddle.net/r3jqyjLz/1/" rel="noreferrer">http://jsfiddle.net/r3jqyjLz/1/</a>) and using negative margins 
  (<a href="http://jsfiddle.net/roLf5tph/1/" rel="noreferrer">http://jsfiddle.net/roLf5tph/1/</a>).</p>
  
  <p>Is there a better way to do this ?</p>