I've been experimenting with different approaches, but I just can't seem to solve this issue.
Currently, I am utilizing Bootstrap 4.3.1 and working with the following div structure:
<div class="d-flex flex-row align-items-center">
<div class="col-8">
<h3>A delightful heading</h3>
<ul>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<div class="col-4 img-wip">
<p>Hello</p>
</div>
</div>
The challenge lies in having one column at col-8 width and another at col-4 width. The second column has a background image specified by the img-wip class. Although the content "Hello" is nicely centered, I'm struggling to make the background image cover the same height as the content within the left col-8 column. The right col-4 box simply won't expand accordingly.
I have attempted using height:100%, flex:1;, flex-grow:1;, among other things.
However, the only approach that seemed to impact the background image's height around <p>hello</p> was specifying a specific numerical height, which isn't my desired solution. Ideally, I would like the height to be determined by the col-8 column height.
Is it feasible to achieve this goal, or am I misunderstanding how flex operates?
The CSS for the .img-wip class is as follows:
.img-fill {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/resin_wip.jpg);
}