Css 使用 Flex 容器，如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度

    .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 300px;
  padding: 16px;
  background-color: gray;
}

hr {
  width: 100%;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
}

/* Make the image container take 50px width */
.flex-container .image-container {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  /* overflow: hidden; */
}

/* Make the image take its full width and height within the image container */
.flex-container img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  object-fit: cover;
}

/* Make the text truncate with ellipsis when there's not enough space */
.flex-container p {
  /* flex: 1; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <div class="flex-container">
    <div class="image-container">
      <div class="image-inner-container">
        <img src="https://picsum.photos/id/64/200" alt="Image">
      </div>
    </div>
    <p>Your long text goes here and can keep going for a long time</p>
  </div>

  <hr />

  <div class="flex-container">
    <div class="image-container">
      <div class="image-inner-container">
        <img src="https://picsum.photos/id/64/200" alt="Image">
      </div>
    </div>
    <p style="flex: initial;">Short text</p>
  </div>
</div>