How to allow an element of flexbox to overflow its container-CodePudding

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  color="#000000" flat height="80px">
    <v-toolbar-items >
      <NuxtLink  to="/">Home</NuxtLink>
      <NuxtLink  to="/">Nomination</NuxtLink>
      <NuxtLink  to="/">Previous Rounds</NuxtLink>
    </v-toolbar-items>
    <div >
      <img src="../static/award-logo.svg" alt="John"  />
    </div>
    <v-toolbar-items >
      <NuxtLink  to="/">Media Center</NuxtLink>
      <NuxtLink  to="/">About</NuxtLink>
      <NuxtLink  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

Code after applying fix by @LMichiels

HTML

<template>
  <v-toolbar  color="#000000" flat height="80px">
    <v-toolbar-items >
      <NuxtLink  to="/">Home</NuxtLink>
      <NuxtLink  to="/">Nomination</NuxtLink>
      <NuxtLink  to="/">Previous Rounds</NuxtLink>

      <img
        src="../static/award-logo.svg"
        alt="John"
        
        height="200px"
      />

      <NuxtLink  to="/">Media Center</NuxtLink>
      <NuxtLink  to="/">About</NuxtLink>
      <NuxtLink  to="/">Contact Us</NuxtLink>
    </v-toolbar-items>
  </v-toolbar>
</template>

SCSS

.nav_container {
  width: 100%;
  position: relative;
  height: 125px;

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

    .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);
      }
    }

    .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 {
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}

CodePudding user response：

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  flat >
<div >
  <a  to="/">Home</a>
  <a  to="/">Nomination</a>
  <a  to="/">Previous Rounds</a>
  <img src="https://www.pngitem.com/pimgs/m/74-749225_host-circle-hd-png-download.png"> </img>
  <a  to="/">Previous Rounds</a>
  <a  to="/">Previous Rounds</a>
  <a  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