html5 - Why does the second flex immediately follow the first flex container?

Question

Question: How can the second flex be moved behind the first flex container?

navbar code

.navbar {
  height: 60px;
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
  display: flex;

  .theme;
  .green-border;
}

container code

.container {
  display: flex;

  .make-col(@max-col-num);
  .make-col-offset(@max-col-num);
}

Answer 1

flex-direction: colum;?

Answer 2

.container is a flex container, .navbar and .main are both flex containers and flex items