left width window.innerWidth documentElement.clientWidth A dashed border is drawn around the centre box when the page loads, and is re-positioned by an event handler when the viewport is resized.
Try toggling your OS's "show scroll bars" setting and showing/hiding the DevTools. Depending on OS, toggle setting and DevTools' position, the following can happen—but when the viewport is subsequently resized, they start working as expected again:
The border doesn't match up with the centre box's position.
The element inspector reports that the centre box's width doesn't change, but getBoundingClientRect() does.
The vertical scrollbar is not rendered, but documentElement.clientWidth reports as if it is.
Further: code running in an extension's content script always receives the incorrect values at first, but does also get correct values after a viewport resize (if you have the Landmarks extension you can check that on this page). Version of this page without added landmarks.
These problems occur in Firefox 85, Chrome 88, Edge 88 (though only the extensions part seems to be a problem when Flexbox is used) and Safari 14, on macOS and Windows (I've not tested Linux, nor HIDPI display modes). Additional test case: CSS Grid (with landmarks).