Chrome adds padding to DIVs with borders

Question

I know this has been asked before and no one has ever solved it so it's fair to ask again and that it's fine in Firefox but any DIV with a border has unwanted padding so DIVs with borders can never perfectly touch in Chrome. It's absolutely fine in Firefox and even IE. Does anyone have any ideas?

body, html {
    background-color: black;
}

.outer {
    display: flex;
    flex-direction: column;
    min-height: 100px;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0;
    border: 10px solid white;
}

.inner {
    height: 50px;
    width: 100%;
    padding: 0;
    margin: 0;
    color: white;
    background-color: white;
    border: 0;
    border: 0;
    border-radius: 0;
}

<div class="outer">
<div class="inner"></div>
</div>

Here's Chrome based browsers adding a border.

Here it is completely fine in Firefox with no gaps.

I've added just the code as its own page, the issue persists. The only styles applied are the ones shown.

EDIT Why has this been closed? It's a known issue, that I've given a minimum reproducible example for.