use javascript to transform scale child div to parent

I've been struggling to find and/or write a pure javascript (not jQuery, cant use the library in the application) in my reactJs app, that scales a child div to it's parent's width.

I have a wrapper(parent) with a maxwidth of, lets say 1200px. It's child div, at 100% scale is 1400px. On DOM load the child div will overflow by 200px. Obvi. The child div, needs to scale to the parent div, and update it's scale as the window gets smaller.

The content in the child div MUST scale, I can't simply set it's width to 100% as it resize with the parent. The child element will be a "preview" of a website that will actually scale (as an image does).

I found this from CSS-Tricks, but I was unable to get it working after rewriting it to javascript (not jQuery).

var $el = $("#very-specific-design");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#scaleable-wrapper");

$wrapper.resizable({
  resize: doResize
});

function doResize(event, ui) {

  var scale, origin;

  scale = Math.min(
    ui.size.width / elWidth,    
    ui.size.height / elHeight
  );

  $el.css({
    transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
  });

}

var starterData = { 
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}
doResize(null, starterData);

Any help?