Firefox focus styling not using correct tab order

Question

In Firefox - when clicking to the left of my navbar and then pressing tab I end up focusing the 3rd element in my navbar not the first element like I would expect.

I have made a code pen to simplify this issue https://codepen.io/jamesprenticez/pen/MWLdPgL

Everything behaves as expected in Chrome.

I have tried tabindex 1, 2, 3 and also tabindex 0 which should order things by their position in the dom.

<div class="outter">
  <div class="inner">
    <!--- <div>test</div> -->
    <div class="one focus" tabindex="1">1</div>
    <div class="two focus" tabindex="2">2</div>
  </div>
</div>

body {
  margin: 0;
}

.outter{
  display: flex;
  background-color: red;
  padding-left: 50px;
  justify-content: center;
}

.inner{
display: flex;
background-color: bisque;
padding:  10px;
}

.one{
  background-color: blue;
  padding: 50px;
 }

.two{
  background-color: green;
  padding: 50px;
}


.focus:focus{
  border: white solid 5px;
}