I want to include a paragraph in the image but it always overflows.
I want the image to be resized long enough to be as long as the paragraph.
I've tried using min-height but it doesn't work.
.image-container{ position: relative; min-height:100vh; width: 100%; justify-content:center; align-items:center; display:flex; } .truck-image{ position: relative; top:50px; object-fit: cover; width:100%; height:100%; } .text-container{ position: absolute; top:110px; left:0; padding-left: 100px; width:30%; color:white; z-index:3; }
I imagined that using min-height would resize the container to its screen when resized, thus resizing the image, but that's not the case.
I suggest looking at things the other way around.
It's text whose parent height must be set, so absolute values won't work.
If you set an image as the parent's background image and make the parent follow the text size, the image (of a given size cover) will automatically fill the required space.
Here's a simple example based on the CSS you provided: