Make background image scale to size of content in front - html

Question

Basically I have a div with an image and a div inside of it with content. I need to make the background image be the size of whatever the content is, so grow/shrink accordingly.
Right now, it only shows the full size of the image which results in a lot of space being left where there is no content.
Here is my current styling, it is required I used flexbox.
.section {
height: 100%;
.section_image {
position: relative;
height: 100%;
display: flex;
flex: 1 1 100%;
img {
object-fit: cover
}
}
.content {
position: absolute;
display: flex;
flex: 1 1 100%;
}
}
<div className="section>
<div className="section_image">
<img src={Image} alt="" />
</div>
<div className="content">
<h1>Title</h1>
<p>Body Text</p>
</div>
</div>

Answer 1

.section {
height: 100%;
}
.section_wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
overflow: hidden
}
.section_image {
position: relative;
height: 100%;
display: flex;
flex: 1 1 100%;
}
img {
object-fit: cover;
width: 100%;
}
.content {
position: relative;
display: flex;
flex: 1 1 100%;
overflow: hidden;
width: fit-content
}
.content__elements {
display: flex;
z-index: 2;
color: white
}
<div class="section">
<div class="content">
<div class="section_wrapper">
<div class="section_image">
<img src="https://www.gardendesign.com/pictures/images/675x529Max/site_3/cosmos-pink-flower-pixabay_11886.jpg" alt="" />
</div>
</div>
<div class="content__elements">
<h1>Title</h1>
<p>Body Text</p>
</div>
</div>
</div>