Используя flexbox, почему два изображения с разными пропорциями растягиваются по-разному

Question

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

Вот кодекс, иллюстрирующий проблему: https://codepen.io/actik/pen/xaZqmG

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.flex {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
}

.row {
  flex-flow: row wrap;
}

.col {
  flex-flow: column wrap;
}

.structure-100 {
  flex: 1 100%;
}

.structure-50 {
  flex: 1 50%;
}

.content {
  color: #fff;
  background-color: #aa0000;
  width: 100%;
  flex: 1 100%;
}

.element_left {
  flex: 1 50%;
  padding-right: 15px;
  padding-bottom: 30px;
}

.element_right {
  flex: 1 50%;
  padding-left: 15px;
  padding-bottom: 30px;
}

.content-text {
  padding: 0 10px;
}

img {
  max-width: 100%;
  height: auto;
  align-self: center;
}

  <div class="wrap">
    <div class="flex row structure-100">     

        <div class="flex col structure-50">    
            <div class="flex element_left">
                <div class="content">
                    <img src="http://www.placebacon.net/625/875/" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>
        </div>



        <div class="flex col structure-50">

            <div class="flex element_right">
              <div class="content">
                <img src="http://www.placebacon.net/625/360" alt="">
                <div class="content-text">
                  <h2>Card title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                </div>
              </div>
            </div>
            <div class="flex element_right">
                <div class="content">
                    <img src="http://www.placebacon.net/625/360" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

Я сделал много разных тестов и не могу понять это поведение, любые советы приветствуются, спасибо за вашу помощь!

Редактирование: здесь работает версия на 1280 пикселей (титульные карточки выровнены внизу) и вторая версия при уменьшении ширины, нижние 2 изображения и титульные карточки больше не выровнены. Я хочу, чтобы красная часть добавляла пространство внизу, если необходимо, но выравнивайте изображение и заголовок.

рабочая версия не работает

Большое изображение раздавлено.

Answer 1

Как я понял из нашего выступления в комментариях, ваша проблема в том, что левый раздел с «большим» изображением (изображения не представлены в предоставленном вами фрагменте, они присутствуют в демонстрационной версии CodePen, которую вы должны предоставить. его ссылка) растягивается не так, как предполагалось, и потому, что в вашем CSS вы дали классу .flex правило align-items: flex-start;, что означает, что элемент гибкого контейнера должен быть расположен сверху (вертикально), таким образом, он не позволяет элементу растягиваться, вместо этого вам просто нужно заменить эту строку align-items: flex-start; на align-items: stretch; в классе .flex, чтобы этот класс стал:

.flex {
   display: flex;
   box-sizing: border-box;
   align-items: stretch;
}

А вот исполняемый фрагмент:

$gutter: 30px;

.wrap{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.flex {
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
}

.row {
    flex-flow: row wrap;
}

.col {
    flex-flow: column wrap;
}

.structure-100 {
    flex: 1 percentage(1/1);
}

.structure-50 {
    flex: 1 percentage(1/2);
}

.content {
  color: #fff;
  background-color: #aa0000;
  width: 100%;
  flex: 1 100%; 
  }
.element_left .content {
  display: flex; 
  flex-flow: column wrap;
  }
.element_left {
    flex: 1 percentage(1/2);
    padding-right: $gutter / 2;
    padding-bottom: $gutter;
}
    
.element_right {
    flex: 1 percentage(1/2);
    padding-left: $gutter / 2;
    padding-bottom: $gutter;
}

.content-text {
    padding: 0 10px;
}
.element_left .content .content-text {
  flex-grow: 0;
  margin-top: auto;
}
img {
    max-width: 100%; 
    height: auto;
}
.element_left .content img {
  width: 100%;
  flex-grow: 1;
  align-self: flex-start;
}

  <div class="wrap">
    <div class="flex row structure-100">     

        <div class="flex col structure-50">    
            <div class="flex element_left">
                <div class="content">
                    <img src="http://www.placebacon.net/625/875/" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>
        </div>



        <div class="flex col structure-50">

            <div class="flex element_right">
              <div class="content">
                <img src="http://www.placebacon.net/625/360" alt="">
                <div class="content-text">
                  <h2>Card title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                </div>
              </div>
            </div>
            <div class="flex element_right">
                <div class="content">
                    <img src="http://www.placebacon.net/625/360" alt="">
                    <div class="content-text">
                      <h2>Card title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

Надеюсь, я подтолкнул тебя дальше.