Flex container moves off page - html

Question

I'm having a problem with my flex container basically just leaving the page and going like this:
I tried setting display to table and using <td> elements to put my things in, but it stayed out of the frame. I want it to be a flex container that will contain the first <div>, and the <header>s.
HTML:
<div class="presen">
<div class="tisane"> <!--overlap d'images-->
<img id="img1" src="images/herbal-tea-cup-png-images-35.png" alt="Tasse d'infusion de millepertuis" />
<img id="img2" src="images/noircontourthe.png" alt="" />
</div>
<header>
</header>
</div>
CSS of relevant elements:
.tisane {
display: inline-flex;
}
.tisane img#img1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 220px;
position: absolute;
top: 300px;
left: 140px;
z-index: 2;
}
.tisane img#img2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 330px;
height: 230px;
position: absolute;
top: 298px;
left: 130px;
z-index: 1;
}
header h1 {
text-align: center;
}
.presen {
display: flex;
flex-direction: column;
top: 298px;
padding: 0;
}
Thanks.

Answer 1

You need to set the height of your body and presen class.
.tisane {
display: inline-flex;
}
.tisane img#img1 {
display: block;
margin: 0 auto;
width: 300px;
height: 220px;
position: absolute;
top: 300px;
left: 140px;
z-index: 2;
}
.tisane img#img2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 330px;
height: 230px;
position: absolute;
top: 600px;
left: 130px;
z-index: 1;
}
header h1 {
text-align: center;
}
.presen {
display: flex;
flex-direction: column;
top: 298px;
padding: 0;
height: 100%; //The height of a flexbox can be also set to a percentage
}
body {
height: 100vh;
}
<div class="presen">
<div class="tisane"> <!--overlap d'images-->
<img id="img1" src="https://via.placeholder.com/250" alt="Tasse d'infusion de millepertuis" />
<img id="img2" src="https://via.placeholder.com/250" alt="" />
</div>
<header>
</header>
</div>