How to make flex-box item the same size as what is in it?

Why is the flexbox so much bigger than the picture?

I want to make the flexbox automaticly the same size as the picture or whatever is in it.

    <template>
  <div class="header flex-container">
    <div class="">
      <img class="logo" alt="Logo" src="./../assets/logo.png">
    </div>
      <div>
        <h1 class="">Vier Op 'N rij</h1>
        <h2 class="">Connect-4 for all</h2>
      </div>
    </div>

</template>
<style scoped>
  .logo {
    width: 40%;
  }
  .header {
    background: url("./../assets/HeaderBackground.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .flex-container {
    display: flex;
  }
  .flex-container > div {

  }
</style>