Flexbox - изображение и контент

Question

У меня есть простой гибкий контейнер с 2 предметами;изображение, а другой - небольшой фрагмент описательного текста.

Я бы хотел, чтобы изображение росло и было максимально отзывчивым, но я также хочу, чтобы была максимальная высота, чтобы избежать егорастет слишком много.Это приводит к разрыву при достижении максимальной высоты и увеличении ширины экрана.

Есть ли способ, чтобы элемент контейнера заполнял изображение по мере его роста, чтобы не было пропусков, или, возможно, выровнял изображение по левому или правому краю экрана (самостоятельное выравнивание не былоПохоже на работу)?Я не уверен, что ответ на этот вопрос.

.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

Если вы хотите выровнять текст и изображение по сторонам, используйте justify-content:

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

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

codepen

Answer 2

Решение № 1

Избавиться от

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

Решение № 2

.image{
  text-align:right;
}

Решение № 3 ( Вы пытались достичь этого )

Все, что вам нужно было добавить flex, направление к column, а затем выровнять элементы вправо по 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>