Flexbox - Image and Content

Question

I have a simple flex container with 2 items; an image and the other is a small piece of descriptive text.

I'd like the image to grow and be as responsive as possible, but I also want there to be a max-height in place to avoid it growing too much. This causes a gap when the max-height is reached and the screen expands even further in width.

Is there a way to only have the container item fill the image as it grows so there are no gaps, or perhaps align the image to the left or the right side of the screen (self-align didn't appear to work)? I'm not sure what the answer to this is.

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.container>.image {
  flex-grow: 1;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}

<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>

Answer 1

Solution #1

Get rid of

.container > .image {
  flex-grow: 1;
}

Solution #2

.image{
  text-align:right;
}

Solution #3 (You were trying to achieve this one)

All you needed was to add flex, direction to column and then align items to right by flex-end

.image{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:1;
}

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}

<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>