CSS容器元素-子元素更改时保持位置

Question

假设我有以下html

<div class="myflex">
    <div class="item">
      Item1
    </div>
    <div class="item">
      Item2
    </div>
    <div class="item">
      Item3
    </div>
  </div>

，我在上面的html中跟随css：

.myflex {
  display: flex;
}

.item {
  padding: 2rem;
  margin: 3rem;
  border: 2px solid black;
}

.item:hover {
  border: 5px solid red;
}

我的问题是当我在 flexbox （或 inline-block 等）中包含元素时，则在此示例中，例如当鼠标悬停在第一个或第二个元素的大小以及结果-其他元素的位置正在更改。 正确进行这种布局工作的正确方法是什么？我的目标是在保持其他元素的大小和位置的同时，增加要悬停的元素的边框大小。 欢迎任何提示。