Make anchor tag take up 100% of div

Question

I want the "Home" and "History" tab to take up 100% of the bottom div but when I enter 100% in the css it clips out. I also want the overflow to be hidden so making it visible isn't a solution.

.bottom {
    background-color: red;
    width: 100%;
    max-width: 3000px;
    max-height: 200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-style: solid;
}
.navBottom{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

}   
.navBottom a {
  color: white;
  text-align: center;
  padding: 1vh 50px;
  max-height: 200px;
  text-decoration: none;
  font-size: 1.8vh;
  border-right: 2px solid black;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}

<div class="bottom">
        <div class="navBottom">
        <a href="../index.html">Home</a>
        <a href="history.html">History</a>
      </div>
        </div>

Answer 1

I did not understand your question properly but maybe this fixes the problem.

.bottom {
    background-color: red;
    width: 100%;
    max-width: 3000px;
    max-height: 200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-style: solid;
}
.navBottom{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
}   
.navBottom a {
  width: 100%;
  color: white;
  text-align: center;
  padding: 1vh 50px;
  max-height: 200px;
  text-decoration: none;
  font-size: 1.8vh;
  border-right: 2px solid black;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}

<div class="bottom">
        <div class="navBottom">
        <a href="../index.html">Home</a>
        <a href="history.html">History</a>
      </div>
        </div>