HTML reserve space for scrollbar : <p>I have a div that may overflow as content is added or removed.</p>

<p>However the UI designer does not want a visible, but inactive scrollbar (as with <code>overflow: scroll</code>), and they don't want the content layout to change when one is added and remove (as with <code>overflow: auto</code>).</p>

<p>Is there a means to get this behavior, and considering the different scrollbars on different platforms and browsers.</p>

<p><a href="https://i.stack.imgur.com/MQi3P.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MQi3P.png" alt="enter image description here"></a>
<a href="https://jsfiddle.net/qy9a2r00/1/" rel="noreferrer">https://jsfiddle.net/qy9a2r00/1/</a> </p>
