Using a flex container, how can I give a child image its full width while right aligning all of the flex children?

I'm trying to achieve this layout where there is an image that is a set width and the text next to it is truncated if it is too long. I also want the content of flex container to be right aligned.

I have been playing with this at https://codepen.io/zeckdude/pen/jOQeRoZ and when I set flex: 1 on the paragraph in order to ensure that the image gets its full width, I can't figure out how to still right align all of the content. Unfortunately, I still end up with this result:

Here's the code that I have in the codepen:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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: 100%;
height: 100%;
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;
}

<!-- language: lang-html -->

<div class="container">

<div class="flex-container">
<div class="image-container">
<img src="https://picsum.photos/id/64/200" alt="Image">
</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">
<img src="https://picsum.photos/id/64/200" alt="Image">
</div>
<p>Short text</p>
</div>
</div>

<!-- end snippet -->

Some folks have suggested removing the flex: 1 on the .flex-container p but unfortunately I need that there in order to ensure that the image gets to take its full width. You can see that in this screenshot where I have removed it and the image isn't looking correct:

Here is a different solution as these contents are dynamic. The changes I have made:

.flex-container .image-container {
    /* overflow: hidden; */
}
.flex-container img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
}
.flex-container p {
    /* flex: 1; */
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

You can achieve the layout with two simple adjustments to your code:

.flex-container p {
   /* flex: 1; */ /* you don't need this */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.flex-container .image-container {
   width: 50px;
   height: 50px;
   border-radius: 25px;
   overflow: hidden;
   flex-shrink: 0; /* new; disable flex-shrink */
}

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.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;
  flex-shrink: 0; /* new */
}

/* Make the image take its full width and height within the image container */
.flex-container img {
  width: 100%;
  height: 100%;
  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;
}

<!-- language: lang-html -->

<div class="container">
  <div class="flex-container">
    <div class="image-container">
      <img src="https://picsum.photos/id/64/200" alt="Image">
    </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">
      <img src="https://picsum.photos/id/64/200" alt="Image">
    </div>
    <p>Short text</p>
  </div>
</div>

<!-- end snippet -->

You wrote:

> Some folks have suggested removing the flex: 1 on the
> .flex-container p but unfortunately I need that there in order to
> ensure that the image gets to take its full width.

A default setting on a flex container is flex-shrink: 1. This means that flex items will automatically shrink to avoid overflowing the container. To ensure that the image respects its defined width, just disable flex-shrink.