I am having difficulties restricting the height of an img to the same height of an article that is positioned next to it.This is my HTML:
section { display: flex;}article { display: flex; flex-direction: column; justify-content: center;}<section><article><h4 class="subheading">subtitle text</h4><h2 class="heading">heading text</h2><p class="text">Blabla text</p><a href="">Call to action</a></article><figure><img src="very high img"></figure></section>I have multiple of these sections with different text content and image files.
The articles height is dependent on the amount of text in its children, which is what I want.
The img should always be as high as the article but with large img files it stretches beyond the articles height.
Here is a screenshot of the problematic section: