Установите ту же высоту, что и у других div, без javascript и внутри flexbox

Question

Я пытаюсь добиться этого:

Я установил max-width для своего абзаца, и я хочу, чтобы два изображения имели такой же высоты, как абзац. Но проблема в том, что у меня сложный дизайн flexbox, как показано ниже.

Красные и зеленые поля - это элементы div со свойством display: flex, а синие - содержимое. Я сделал эту схему, чтобы сделать все это адаптивным для небольших пейзажных экранов (извините, мой второй рисунок выглядит так, как будто он на мобильном телефоне).

Большие экраны:

Маленькие экраны:

Итак, вот что у меня сейчас, с height: 100% на изображениях:

Есть ли способ сделать это в чистом виде CSS? Я пробовал javascript, но есть конфликты между flexbox и JS, которые приводят к этому: видео о том, как мой конфликт JS / CSS выглядит как

Спасибо!

body {
  min-height: 100vh;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background-color: cornsilk;
}

#row1 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#row1 #row1_col1 {
  display: inline-flex;
}
#row1 #row1_col1 #photo {
  margin-right: 2em;
  margin-right: 2em;
}
#row1 #row1_col1 p {
  background-color: coral;
  height: fit-content;
  width: fit content;
  text-align: justify;
  width: 31em;
  margin-right: 0px;
  margin-left: 0px;
}
#row1 #map {
  margin-left: 2em;
}

<div id="row1">

  <div id="row1_col1">
    <img src="http://via.placeholder.com/400x400" id="photo" class="about_imgs">

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing. <br> <br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Uot enim ad minim veniam, quis nostrud. <br> <br>
      xcepteur sint occaecat cupidatat non proiden.
    </p>

  </div>

  <img src="http://via.placeholder.com/1053x526" id="map" class="about_imgs">

</div>

Answer 1

Есть несколько способов сделать это, во-первых, вы должны сделать так, чтобы оба использованных свойства align-items имели атрибут flex-start так: align-items: flex-start;, как я делал в приведенном ниже фрагменте, чтобы убедиться, что все ваши элементы начинать с того же места (имейте в виду, что это необязательно, и чтобы убедиться, что все ваши предметы будут начинаться с одного и того же пункта в пользовательском интерфейсе, и если вы не хотите этого делать, вы можете пропустить это), второе, что вы необходимо учитывать, что тег p делает поля по умолчанию сверху и снизу, чтобы переопределить его с помощью margin: 0; в самом теге p. Последнее, что важно, вы должны также определить фиксированную высоту для вашего тега p и убедиться, что ваши фотографии не будут проходить определенную точку с помощью свойства max-height, поэтому вы должны добавить это свойство к обоим ваши изображения. Вы можете увидеть результаты ниже:

body {
  min-height: 100vh;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background-color: cornsilk;
}

#row1 {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
}

#row1 #row1_col1 {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  max-height: 100px;
}

#row1 #row1_col1 #photo {
  max-height: 200px;
  margin-right: 2em;
}

#row1 #row1_col1 p {
  background-color: coral;
  height: fit-content;
  width: fit content;
  text-align: justify;
  width: 31em;
  height: 200px;
  margin: 0;
}

#row1 #map {
  max-height: 200px;
  margin-left: 2em;
}

<div id="row1">
  <div id="row1_col1">
    <img src="http://via.placeholder.com/400x400" id="photo" class="about_imgs">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing. <br> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Uot enim ad minim veniam, quis nostrud. <br> <br> xcepteur
      sint occaecat cupidatat non proiden.
    </p>
  </div>
  <img src="http://via.placeholder.com/1053x526" id="map" class="about_imgs">
</div>

ПРИМЕЧАНИЕ: Я просто использовал 200px для фиксированной высоты, для большей иллюстрации это может быть все, что вы хотите.