Html – How can I make a flex child element shrink (hide) in and out smoothly?

I want to make a flex container that has the child element animate to shrink and grow while having the remaining child elements grow to fill in the space.

The not perfect, but close way I found is to set the max-width to 0px and the borders’ widths to 0px. However, to get this to work I need to set the initial max-width. If I set it to 100% when I get a delay when the transition starts. I think it’s because the initial max-width is 100 and it’s going down to 0 and most of that is not seen. I can make it more responsive if I set the max-width closer to the child sizes, but if I want to shrink and grow another child I get the same issue.

How can I smoothly transition child elements to grow and shrink, without any delays and have the growing elements and shrinking elements transition at the same time?

Demo: https://codepen.io/Adrian-contreras-Tb/pen/YzMQNXp

.flex_parent {
  background-color: red;
  display: flex;
  width: 600px;
  height: 200px;
  gap: 3px;
  justify-content: center;
}

.flex_parent:hover #_1 {
  transform: scale(0);
  padding: 0px;
  margin: 0px;
  max-width: 0px;
  border-width: 0px;
}

.child {
  background-color: purple;
  border: 3px solid silver;
  box-sizing: border-box;
  height: 100%;
  flex-basis: 80px;
  max-width: 100%;
  text-align: center;
  color: white;
  flex-grow: 1;
  transition: all 0.6s ease-in-out;
}

<div class="flex_parent">
  <div class="child" id="_1">test</div>
  <div class="child" id="_2">test</div>
  <div class="child" id="_3">test</div>
  <div class="child" id="_4">test</div>
</div>