Css child dom set width:100% with inline-flex parent dom

Question

I used to thought display:inline-flex makes the flex-container display inline so it's width is determined by the flex-item's width, like this:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.p {
  width: 200px;
}
.c {
  height: 200px;
  display: inline-flex
}

<div class="p">
  <div class="c">
    <img src="https://iph.href.lu/500x100?text=500X100&fg=666666&bg=cccccc" alt="">
  </div>
</div>

As you can see, the div.c which display as inline-flex has the same width with the image inside it .

But if I set image's width to 100%, It seems to be a dilemma, because width:100% means child dom's width is the same as the parent dom, while the parent dom which set display:inline-flex says it has the same width with child dom.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.p {
  width: 200px;
}
.c {
  height: 200px;
  display: inline-flex;
}
img {
  width: 100%
}

<div class="p">
  <div class="c">
    <img src="https://iph.href.lu/500x100?text=500X100&fg=666666&bg=cccccc" alt="">
  </div>
</div>

This time the image's width is the same as div.p which has the width 200px.

I don't know why the image width is 200px, could someone explain it ?