How to allow an element of flexbox to overflow its container

I have tried to use flexbox to create a navbar with the logo in the middle however, it appears that I am unable to allow my logo to overflow the navbar from above and below.

I tried squishing the element in and positioning it but I believe that this is not the optimal solution and it will be a nightmare to code the the responsiveness of it.

HTML

<template>
  <v-toolbar class="nav_container" color="#000000" flat height="80px">
    <v-toolbar-items class="nav-items-left">
      <NuxtLink class="home-link" to="/">Home</NuxtLink>
      <NuxtLink class="nomination-link" to="/">Nomination</NuxtLink>
      <NuxtLink class="prev-link" to="/">Previous Rounds</NuxtLink>
    </v-toolbar-items>
    <div class="logo-container">
      <img src="../static/award-logo.svg" alt="John" class="logo" />
    </div>
    <v-toolbar-items class="nav-items-right">
      <NuxtLink class="media-link" to="/">Media Center</NuxtLink>
      <NuxtLink class="about-link" to="/">About</NuxtLink>
      <NuxtLink class="contactus-link" to="/">Contact Us</NuxtLink>
    </v-toolbar-items>
  </v-toolbar>
</template>

scss:

.nav_container {
  width: 100%;
  position: relative;

  .nav-items-left {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;

    .home-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }

    .nomination-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
    .prev-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .nav-items-right {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;

    .about-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
    .media-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
    .contactus-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .logo-container {
    position: absolute;
    height: 200px;
    width: 200px;
    left: 43.5%;

    .logo {
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}

What is the proper way of achieving this, here is an image which should clarify what I am trying to do
https://imgur.com/J3hfPPq

>Solution :

One solution is to make the container height 0 and the to align everything in the center.

I simplified your code to make it more comprehensible:

HTML:

  <div class="nav_container" flat >
<div class="nav-items-left">
  <a class="home-link" to="/">Home</a>
  <a class="nomination-link" to="/">Nomination</a>
  <a class="prev-link" to="/">Previous Rounds</a>
  <img src="https://www.pngitem.com/pimgs/m/74-749225_host-circle-hd-png-download.png"class="demo-img-placeholder"> </img>
  <a class="prev-link" to="/">Previous Rounds</a>
  <a class="prev-link" to="/">Previous Rounds</a>
  <a class="prev-link" to="/">Previous Rounds</a>

SCSS:

.nav_container {
width: 100%;
background: black;
margin-top: 200px;
height: 125px;
display: flex;
align-items: center;



.nav-items-left {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 0;
    background: yellow;
    border: 1px solid red;

    a {
        background: blue;
    }

    .home-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }

    .demo-img-placeholder {
        height: 50vh;
        width: 50vh;
        background: red;
    }

    .nomination-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }

    .prev-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }
}

.nav-items-right {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;

    .about-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }

    .media-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }

    .contactus-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }
}

.logo-container {
    position: absolute;
    height: 200px;
    width: 200px;
    left: 43.5%;

    .logo {
        &:hover {
            transform: scale(1.2);
        }
    }
}

}

Full pen here :https://codepen.io/Sabshane/pen/VwxajKV