Flex容器元素换行后重叠下方内容，如何让菜单区域下移？

我之前查过一篇关于Flex元素换行的文章，但没解决我的问题。我搭建的网站中，头部的Flex容器内元素可以正常换行，但换行后容器高度没有自动调整，导致下方的菜单/购票区域被重叠，我需要菜单区域能自动下移，给换行后的Flex元素腾出空间。

以下是相关的HTML和CSS代码：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: antiquewhite;
}

.header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  height: 15vh;
  background-color: antiquewhite;
  max-width: 1200px;
  margin: 0 auto;
}

.headerItem {
  flex-grow: 1;
  text-align: center;
  padding-top: 5vh;
}

.leftHandDate {
  /*padding-left: 30vh;*/
  padding-top: 6.5vh;
  padding-right: 5px;
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: x-large;
  color: darkred;
}

.leftHandText {
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: xxx-large;
}

.logoHeader {
  flex-grow: 1;
  padding-top: 4vh;
}

.rightHandText {
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: xxx-large;
}

.rightHandDate {
  /*padding-right: 30vh;*/
  padding-top: 6.5vh;
  padding-left: 5px;
  font-family: LibreBaskerville-Bold, Serif, serif;
  font-size: x-large;
  color: darkred;
}

<header>
  <div class="header">
    <div class="leftHandDate headerItem">
      1869-1950
    </div>
    <div class="leftHandText headerItem">
      Virginia
    </div>
    <!--        logo -->
    <div>
      <img class="logoHeader" srcset="/images/logo-150w.png 150w, /images/logo-200w.png 200w, /images/logo-300w.png 300w" sizes="(max-width: 1300px) 150px,
                        (max-width: 1920px) 200px,
                        300px" src="/images/logo-300w.png" alt="v and t logo, a yellow circle with text queen of the shortlines" />

    </div>
    <div class="rightHandText headerItem">
      Truckee
    </div>
    <div class="rightHandDate headerItem">
      1974-present
    </div>
  </div>
</header>

头部Flex容器内的元素换行后，下方的菜单区域并未下移腾出空间，导致内容重叠（截图：）。

请问：Flexbox的表现本应如此吗？如何让菜单区域自动下移？感谢解答。

内容的提问来源于stack exchange，提问作者JimLohse