When creating a layout with text and an image, I want them to be contained within a parent element that has a specified height, such as 100px.
The text should adjust to the content, whether it's a short phrase or a lengthy paragraph, without a fixed height constraint.
However, when I add an image to the remaining space in the parent element, the image retains its original height, causing it to overflow the div and appear as if it's absolutely positioned (even though it's not). Take a look at the code snippet below:
.parent{
height: 100px;
width: 100%;
padding: 10px;
display: flex;
flex-flow: column;
}
.parent img {
flex: 1 1 auto;
}
.parent .textContainer{
flex: 0 1 auto;
}<div class="parent">
<img src="https://via.placeholder.com/250x250"/>
<div class="textContainer">Text or html here</div>
</div>Essentially, the issue is that the image takes on the height of the original image file, causing it to overflow the div and appear as if it's absolutely positioned (even though it's not).