'border-bottom is not occupying the full width

I want to have a menu occupying the full width of the page in medium and larger devices and in smaller devices I want to display the menu items vertically. Im using a grid for this but I also want to have a red border-bottom below the active list item (positioned a the list item bottom) and on hover. But this red border-bottom is not occupying the full width of the list item. Do you know why?

This is the example: https://jsfiddle.net/9o1n8fmm/

Html:

<div  style="background-color:yellow;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="MenuList">
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS:

ul{
  list-style:none;
}
.MenuList{
  display: flex;
  align-content: center;
  justify-content: space-around;
  li{
    border-left: 1px solid gray;
    padding: 20px 15px 20px 15px;

    a{
      color:#fff;
    }
    &:first-child{
      border-left: 0;
      border-bottom: 5px solid red;
    }
    &:hover{
      border-bottom: 5px solid red;
      cursor: pointer;
    }
  }
}
htmlcssflexbox


Solution 1:[1]

Add flex: 1 to the li for it to occupy all the available space in the ul - see demo below:

ul {
  list-style: none;
}

.MenuList {
  display: flex;
  align-content: center;
  justify-content: space-around;
}

.MenuList li {
  border-left: 1px solid gray;
  padding: 20px 15px 20px 15px;
  flex: 1;
}

.MenuList li a {
  color: #fff;
}

.MenuList li:first-child {
  border-left: 0;
  border-bottom: 5px solid red;
}

.MenuList li:hover {
  border-bottom: 5px solid red;
  cursor: pointer;
}


}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div style="background-color:yellow;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="MenuList">
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Solution 2:[2]

Add this to your LI:

     flex: 1 0 auto;

or yet simpler: flex: 1;

jsFiddle

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kukkuz
Solution 2 Roko C. Buljan

Related Questions