I'm fairly new to HTML and CSS, but I have a basic layout in mind that I'd like to achieve. Currently, I have two "child" divs set up in a row-based flexbox format controlled by the main "parent" div. One of these child divs contains images, while the other has text content. My objective is to adjust the dimensions of the images relative to the size of the text; so that if I resize the text, the images will also resize proportionally.
I initially believed that this could be achieved using height: auto and height: 100% in different sections, like this:
HTML:
<div class="parent">
<div class="child-img">
<img>
<img>
</div>
<div class="child-txt">
<p>Title Text Here</p>
</div>
</div>
CSS (excluding flexbox code, focusing on height):
.parent {
height: auto;
}
.child-img {
height: 100%;
}
.child-txt {
height: auto;
}
img {
height: 50%;
}
p {
font-size: xx-large;
}
The thought process behind this was:
.child-txthas itsheightset toauto, therefore adjusting to fit the content height, which in this case is the<p>block withfont-sizeset toxx-large.parenthas aheightvalue ofauto, implying it should inherit the height from.child-txt.child-imghas aheightvalue of100%, indicating it should take up the vertical space within.parentimghas aheightvalue of50%, meaning it should occupy half the vertical space inside.child-img
However, following this structure actually allows the images to expand to their full sizes, suggesting that .child-img isn't restricting its height based on .parent. Why is this happening? Are there alternative methods to realize my intended design?