Inner div oscillates when using a CSS transition on the parent div - flexbox

Question

Please run my code sample and hover over the black square, why does the inner div, the white border div, oscillate/shake? How do I make it stop doing that?
body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4px solid white;
width: 60px;
height: 60px;
}
<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>
Goal
On hover of my outer div (<div class="transition-container">), I want it to grow and I want to use a transition to make it smooth
I don't want the growing div to take up any more space. Currently, to achieve this, I shrink the margins

Answer 1

Adding transition-timing-function: steps(10, end); fixed my contrived example. Source.
body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
transition-timing-function: steps(10, end);
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4px solid white;
width: 60px;
height: 60px;
}
<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>

Answer 2

Changing the border width from 4px to 4.5px on <div class="inner-container"> fixed it. Changing it to any decimal seems to fix it. For instance if I use 5.5px or 3.5px that fixes it too. I don't understand why though 🤷‍♂️, would love to know why!
I had to use this fix in our application as the transition-time-function fixed didn't work in our more complicated layout.
body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4.5px solid white;
width: 60px;
height: 60px;
}
<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>