Flexbox строки / столбцы равной высоте

Question

У меня есть строка с двумя столбцами, оба 50%.Левый имеет изображение, правый текст.Мой HTML:

.row{
  display:flex;
  flex-direction:row;
  align-items:center;
}

.cell1, .cell2{
  width:50%;
}

.cell2 {
  background: green;
}

<div class="row">
    <div class="cell1"><img src="https://via.placeholder.com/450x450" ></div>
    <div class="cell2">Cell 2</div>
</div>

Теперь я хочу, чтобы фон ячейки 2 был зеленым, а ячейка 2 - такой же высоты, как и ячейка1, и я знаю, что могу добиться этого, задав строкуэтот фон, но как сделать зеленый фон только для cell2 (и иметь такую ​​же высоту, как и cell1)?

Answer 1

Удалить align-items: center; из row и добавить в cell2 с display:flex

.row{
  display:flex;
  flex-direction:row;  
  flex-wrap: wrap;
}

.cell1, .cell2{
  width:50%;
  display:flex;
}
.cell1 img {
  max-width: 100%;
}
.cell2 {
  background: green;
  display:flex;
  align-items: center;
}

<div class="row">
    <div class="cell1"><img src="https://via.placeholder.com/450x450" ></div>
    <div class="cell2">Cell 2</div>
</div>

Answer 2

.row{
  display:flex;
/*   flex-direction:row; */
/*   align-items:center; */ 
}
.cell1, .cell2{
  width: 50%;
}
.cell1 img {
  width: 100%;
  height: auto;
  display: block;
}
.cell2 {
  background: green;
}

<div class="row">
    <div class="cell1"><img src="https://image.ibb.co/jqzDOe/111.jpg"></div>
    <div class="cell2">Cell 2</div>
</div>

Answer 3

Сохраните выравнивание по умолчанию для основного контейнера stretch, чтобы оба имели одинаковую высоту, а затем выровняли содержимое внутри cell2:

.row {
  display: flex;
}

.cell1,
.cell2 {
  width: 50%;
}

.cell2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  background:green;
}

<div class="row">
  <div class="cell1"><img src="https://picsum.photos/300/200?image=0" ></div>
  <div class="cell2">some text here</div>
</div>