JSFiddle - React, Tailwind, and code Playground

HTML

Without middle div
<div id="outer">
    <div id="inner">
    
    </div>
</div>
<br>
With middle div
<div id="outer">
    <div id="middle">
        <div id="inner">
        
        </div>
    </div>
</div>

CSS

#outer {
    border: 1px solid #00F;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
#middle {
    width: 450px;
    height: 225px;
}
#inner {
    border: 1px solid #F0F;
    margin: 25px;
    width: 400px;
    height: 200px;
    display:inline-block;
}

JavaScript

/*

Without a middle div, the inner div should have a margin of 25px all the way around.
Look what we get instead.

There is a 25px margin on THREE sides, but the right side collapses it.


If we add a middle div, we can make it work.
But I have to do some funky adjustments with its height and width.

This happens in every major browser.
Is there any good reason for this behavior? Or is this an error in the CSS specification?

*/