Display size is not a multiple of CSS size

README.md

Display size is not a multiple of CSS size

view on jsgist

index.css

#parent {
  display: flex;
  width: 99px;
  justify-content: space-between;
}
#parent>* {
  flex: 1 1 auto;
  height: 20px;
  min-width: 0;
}
#left {
  background-color: red;
}
#right {
  background-color: blue;
}
pre {
  margin: 0;
}

index.html

<div id="parent">
  <div id="left"></div>
  <div id="right"></div>
</div>

index.js

async function main() {
  log('devicePixelRatio:', devicePixelRatio);
  const parent = document.querySelector('#parent');
  parent.style.width = `${99}px`;
  const left = document.querySelector('#left');
  const right = document.querySelector('#right');
  const observer = new ResizeObserver(logSizes);
  observer.observe(left);
  observer.observe(right);
};

/**
 * @param {ResizeObserverEntry[]} entries
 */
function logSizes(entries) {
  if (!entries[0].devicePixelContentBoxSize) {
    log('WARNING!!! browser does not support getting the actual display size');
  }
  for (const entry of entries) {
    const size = entry.devicePixelContentBoxSize || entry.contentBoxSize;
    log('id:', entry.target.id.padEnd(5), 'displayWidth:', size[0].inlineSize, 'cssWidth:', entry.target.getBoundingClientRect().width);
  }
}

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
  document.body.appendChild(elem);
}

main();

jsGist.json

{"name":"Display size is not a multiple of CSS size","settings":{},"filenames":["index.html","index.css","index.js"]}