Can't align items with static px width inside a flex container

Question

That's interesting, why I can't align items with static px width inside a flex container. If I don't give the child blocks the static width of 100 % they are centered in the center of the parent . But when I'm using the width of 100ps the child blocks are moved to the start position.

.wrapper {
 display: flex;
 justify-content: space-around;
}
.item {
  width: 20%;
}
.item__inner {
  width: 100px;   /* Beacuse of the static width I can't align the inner items inside the item wrapper .item*/
  height: 100px;
  border-radius: 50%;
  background: red;
}

<div class="wrapper">
  <div class="item">
    <div class="item__inner">
    </div>
  </div>
  <div class="item">
  </div>
</div>

Answer 1

Well if the case is to align div with class item__inner to the center, you just need to add margin auto: like this:

.wrapper {
 display: flex;
 justify-content: space-around;
}
.item {
  width: 20%;
  background-color: orange;
}
.item__inner {
  margin: 0 auto;
  width: 100px;   /* Beacuse of the static width I can't align the inner items inside the item wrapper .item */
  height: 100px;
  border-radius: 50%;
  background: red;
}