How do I have a flex container that takes up the space of its elements?

I would like to have a box with two lines using flexbox

. The problem I can't seem to solve is that the container is using the full width of the page and not hard-coded to the elements:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-style: solid;
}

.header {
  background-color: black;
  color: white;
}

.body {
  background-color: blue;
  color: white;
}
      

        
        
        
      

    

<div class="container">
  <div class="header">
    the header
  </div>
  <div class="body">
    the body
  </div>
</div>
      

        
        
        
      

    

What should be set so that the container is just the width of the elements? I know I can force it width

, but I would like it to be rather content-driven elements.