Transform scale instead of Zoom

HTML

<div class="simulated-viewport">
  <div class="static">Banner before</div>
  <div class="message-content">
    Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider Before wider
    <div class="wider">Wider content</div>
    After wider (last line of content)
  </div>
  <div class="static">Banner after</div>
</div>

CSS

.simulated-viewport {
  width: 288px;
  background: lightgray;
}

.static {
  height: 100px;
  background-color: skyblue;
}

.wider {
  width: 506px;
  background: red;
}

.message-content {
  background-color: pink;
}

JavaScript

let content = document.querySelector('.message-content');
let scaleFactor = content.offsetWidth / content.scrollWidth;
console.log('scaleFactor = ' + scaleFactor);

content.style.zoom = scaleFactor;