a responsive component using css grid and flex box

if you have a section that contains just a background-image and it's height isn't fixed, you can set the display of its parent to grid and set the right fractions to make its height according to the rest chidrens, for exmple:

<main>
  <header></header>
  <section>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem amet, illo
      odio atque cupiditate quam adipisci minus neque impedit ipsum!
    </p>
    <button>Lorem, ipsum dolor.</button>
  </section>
</main>

in this case, the header element doesn't have a specific height, but you can give it a height accourding to the height of the section element height:

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
}

like this, the height of the header will be auomatically half the height of the section element;