relative element in flex-box , losing the width - html

Question

I have a relative element within which there is an element with an image background that is absolute, when the parent of the relative element becomes a flex-box I lose the width, only when I bring the relative element static width (width: num px), I do not lose the width but the image does not responsive.
/* -------------------------------- */
/* header */
header {
margin-bottom: 24px;
display:flex;
}
.header-items h1 {
font-weight: 900;
font-size: 48px;
text-transform: uppercase;
line-height: 48px;
margin-bottom: 32px;
}
.header-items p {
margin-bottom: 35px;
font-weight: 500;
}
.pre--order {
display: flex;
align-items: baseline;
margin-bottom: 64px;
}
.pre--order a {
padding: 16px 26px;
background-color: #f16718;
text-transform: uppercase;
border-radius: 8px;
color: #ffffff;
margin-right: 32px;
}
.pre--order p {
font-weight: 700;
text-transform: uppercase;
}
.keyboard--header {
position: relative;
overflow: hidden;
max-width: 100%;
height: 425px;
}
.kh--image {
background-image: url("https://www.beauchamp.com/_wp/wp-content/uploads/2020/12/xIsrael_TelAviv_City_shai-pal1.jpg");
background-repeat: unset;
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
border-radius: 15px;
top: 0;
left: 24px;
}
<header>
<div class="container">
<section class="header-items">
<h1>Typemaster Keyboard</h1>
<p>
Improve your productivity and gaming without breaking the bank.
Upgrade to a high quality mechanical typing experience.
</p>
<div class="pre--order">
Pre-order now
<p>Release on 5/27</p>
</div>
</div>
</section>
<section>
<div class="keyboard--header">
<div class="kh--image"></div>
</div>
</section>

Answer 1

Here is an example where I've wrapped the flexbox, given the flex child an explicit width&height, and fixed up a bunch of things like margin/padding you should generally base off typography not px
header {
margin-bottom: 1.5em;
display: flex;
flex-flow: row wrap;
}
.header-items h1 {
font-weight: 900;
font-size: 3rem;
text-transform: uppercase;
line-height: 3rem;
margin-bottom: 2rem;
}
.header-items p {
margin-bottom: 2rem;
font-weight: 500;
}
.pre--order {
display: flex;
align-items: baseline;
}
.pre--order a {
padding: 1em 1.5em;
background-color: #f16718;
text-transform: uppercase;
border-radius: 8px;
color: #fff;
margin-right: 2em;
}
.pre--order p {
font-weight: 700;
text-transform: uppercase;
}
.keyboard--header {
width: 100%;
height: 200px;
}
.kh--image {
background-image: url("https://www.beauchamp.com/_wp/wp-content/uploads/2020/12/xIsrael_TelAviv_City_shai-pal1.jpg");
background-clip: cover;
background-size: 100%;
width: 100%;
height: 100%;
border-radius: 15px;
}
<header>
<div class="container">
<section class="header-items">
<h1>Typemaster Keyboard</h1>
<p>
Improve your productivity and gaming without breaking the bank. Upgrade to a high quality mechanical typing experience.
</p>
<div class="pre--order">
Pre-order now
<p>Release on 5/27</p>
</div>
</section>
</div>
<div class="keyboard--header">
<div class="kh--image"></div>
</div>
</header>