JSFiddle - React, Tailwind, and code Playground

HTML

Red line appears in incorrect position for flex items. This is because left: auto is calculated incorrectly.

<div class="flex group">
  <div class="item">
   1
  </div>
  <div class="absolute item">
   2
  </div>
  <div class="item">
   3
  </div>
  <div class="item">
   4
  </div>
</div>

Red line appears in correct position with inline-block. As calculated if position: static was used.
<div class="inline group">
  <div class="item">
   1
  </div>
  <div class="absolute item">
   2
  </div>
  <div class="item">
   3
  </div>
  <div class="item">
   4
  </div>
</div>

CSS

/* Incorrectly shows left: auto (Broken Chrome 52, works Chrome 51 or below */
.group {
  margin: 10px 0px;
}
.group .item {
  width: 100px;
  height: 100px;
  margin: 0px 10px;
  background-color: #DDDDDD;
}
.group .absolute.item {
  position: absolute;
  background-color: red;
  color: red;
  font-weight: bold;
  width: 1px;
  top: auto;
  left: auto;
}

.flex.group {
  display: flex;
}
.inline.group .item {
  display: inline-block;
}