Why doesn't flexbox item 'div' occupy whole line here?

I'm trying to make a header on a website, and I'm using flexbox to make a layout. I first make a container that will contain header and main. And initialize display:flex in the container thus header and main becomes flexbox items. And using flex property, I'm setting the proportion for both of them.

And in the div id="header", which is a flexbox item of container, I also make this flexbox container, in which to make div id="header-title" a flexbox item of it.

But here is the problem.

I'm assuming this 'header-title' flexbox item to occupy the whole line, but it actually doesn't. Why is this flexbox item not occupying the whole line?

Isn't div block level element which occupy the whole line of the window?

Here's a code of mine and image that shows it doesn't occupy the whole line.

   * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    a {
      /* This will inherit the color of its parent */
      color: inherit;
      text-decoration: none;
    }

    #container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    #header {
      background: yellow;
      min-height: 100px;
      flex: 1.5 1 0;

      display: flex;
    }

    #main {
      background: blue;
      flex: 8.5 1 0;
    }

  <div id="container">
    <div id="header">
      <div id="header-title">
        <div id="header-first-row">Daegudude's Calculator</div>
      </div>
    </div>

    <div id="main">
      MAIN
    </div>
  </div> <!-- container -->