Flex: make child with same height of absolute sibling - html

Question

I must create a section with two half divs with the same height, but the first must inside the container and other outside, like that sketch:
I have searched other solutions but I couldn't get them to work, like flex:1, align-stretch, probably because of the way I did it. Maybe you can fresh my mind, by suggesting another way.
Here is my code:
.bg-cyan {
background-color: cyan;
}
img {
max-width: 100%;
}
.right-half {
right: 0;
left: 50%;
border: 2px solid purple;
}
.container {
border: 2px solid red;
}
.col-6 {
flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<section class="position-relative bg-cyan">
<div class="container position-static p-0">
<div class="row align-items-stretch">
<div class="col-6">
<h4 class="text-secondary mb-6">This col must be the same height of sibling absolute -></h4>
<h3>Staying inside the container</h3>
<ul>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
</ul>
</div>
<div class="col-6 position-absolute right-half p-0">
This is absolute positioned because the layout require the image to go outside of container until the page end, with no height setted because of responsive and dynamism.
<img src="https://picsum.photos/956/870">
</div>
</div>
</div>
</section>

Answer 1

I think you don't have to make the right side to absolute, just use the flexbox feature itself. Try this:
.bg-cyan {
background-color: cyan;
}
img {
max-width: 100%;
}
.right-half {
right: 0;
left: 50%;
border: 2px solid purple;
}
.container {
display: 'flex';
border: 2px solid red;
flex-direction: 'row';
}
.col-6 {
flex: 1;
align-self: 'auto';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<section class="position-relative bg-cyan">
<div class="container position-static p-0">
<div class="row align-items-stretch">
<div class="col-6">
<h4 class="text-secondary mb-6">This col must be the same height of sibling absolute -></h4>
<h3>Staying inside the container</h3>
<ul>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
<li>Lorem ipsum dolor sit ame;</li>
</ul>
</div>
<div class="col-6 p-0">
This is absolute positioned because the layout require the image to go outside of container until the page end, with no height setted because of responsive and dynamism.
<img src="https://picsum.photos/956/870">
</div>
</div>
</div>
</section>