Set same height as other divs, without javascript, and inside flexbox - css

Question

I am trying to achieve this:
I set a max-width to my paragraph, and I want the two images to have the same height as the paragraph. But the problem is I have a complex flexbox design, as shown below.
Red and green boxes are divs with display: flex property, and blue boxes are content. I made this schema to make the whole thing responsive for small landscape screens (sorry my 2nd drawing looks like it's on mobile).
Large screens:
Small screens:
So here is what I have right now, with height: 100% on the images:
Is there a way to do this in pure CSS? I tried javascript but there are conflicts between flexbox and JS, which lead to this: video of how my JS/CSS conflict looks like
Thanks!
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

There are several ways to do this, first of all, you should make both of used align-items property have flex-start attribute just like this: align-items: flex-start; as I did in the below snippet to make sure all your items begin from the same place (keep in mind this is optional and for making sure all your items will begin from the same certain point in the UI, and if you don't want to do this you can skip this), the second thing you must consider is the p tag does the default margin from top and bottom so to override it with margin: 0; in the p tag itself. The last and important thing at all you should define a fixed height for your p tag also, and make sure your photos wouldn't pass a certain point with the max-height property, so you have to add this property to both of your images. You can see the results below:
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>
NOTE: I just used 200px for the fixed height for more illustration it could be whatever you want to.