Make element dividing lines equal height with container

I'm trying to do a simple navbar, but the size of the border matches the size of the text and not its container's height. I'm trying to 'close' each text inside its own 'rectangle'. How do I achieve that?

.flex-r {
    display: flex;
    justify-content: space-around;
    justify-items: center;
    flex-wrap: nowrap;
    gap: 1em;
    align-items: center;
    border: 1px solid black;
    min-height: 40px;
}

.nav-item {
    border-right: 1px solid black;
    width: auto;
}

 <div class='flex-r'><a class='nav-item'>Release</a><a class='nav-item'>Statistics</a><a class='nav-item'>Frequent releases</a></div>

You have the container set to min-height: 40px.

Add the same code to the items.

But here's a better overall solution that may work for you:

.flex-r {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;                /* sets the dividing line width */
  background-color: black; /* sets the dividing line color */
  border: 1px solid black; /* sets the border around the container */
  min-height: 40px;
}

.nav-item {
  background-color: white; /* restores background color */
  
  /* center the content */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<div class='flex-r'>
   <a class='nav-item'>Release</a>
   <a class='nav-item'>Statistics</a>
   <a class='nav-item'>Frequent releases</a>
 </div>

Make element dividing lines equal height with container

Related

Recent Posts