如何获取点击元素在flex换行布局中的所在行位置？

我尝试过一种计算Flexbox每行元素数量的方法，但它仅能返回首行的元素数量，无法满足我的需求——我需要在用户点击任意元素时，获取该元素所在的行位置。比如在下方示例中，点击黑色高亮的盒子，应得到数值"2"。

示例代码 #

CSS #

.grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 400px;
  background-color: #ddd;
  padding: 10px 0 0 10px;
  margin-top: 5px;
  overflow: auto;
}

.item {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 0 10px 10px 0;
}

.active.item {
  outline: 5px solid black;
}

HTML #

<div id="grid" class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

要求：解决方案需不受容器尺寸变化导致的换行影响。

内容的提问来源于stack exchange，提问作者NFSBuff