Outline in FireFox Quantum gets expanded by child divs

I stumbled across a strange behaviour in FireFox Quantum, where the outline of a div seems to be expandable by absolute positioned child divs:

<div id="outer-div">
  <div id="inner-div">
    <div id="terrible-expander"></div>
    hello outline
  </div>
</div>

#outer-div {
  background-color: gray;
}

#inner-div {
  background-color: green;
  box-sizing: border-box;
  width: calc(100% - 20px);
  position: relative;
  outline: 2px solid red;
  outline-offset: -2px;
  vertical-align: baseline;
  margin-left: 20px;
}

#terrible-expander {
  height: 20px;
  width: 3px;
  background-color: blue;
  position: absolute;
  left: -20px;
}

This example looks as expected in Chrome:

and is messed up (IMO) in Quantum:

Here is the fiddle

My question

Is there a way, to align the behaviour of FireFox Quantum to that of Chrome in this case?

I managed to fix it, so both browsers behave the same, by moving the property position: relative; from #inner-div to #outer-div. Here is the working fiddle