Make anchor tag take up 100% of div-CodePudding

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 >
        <div >
        <a href="../index.html">Home</a>
        <a href="history.html">History</a>
      </div>
        </div>

CodePudding user response：

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 >
        <div >
        <a href="../index.html">Home</a>
        <a href="history.html">History</a>
      </div>
        </div>

CodePudding user response：

two things.

I think it will be a better approach to use rem or em unit in the padding and font size.
for the 100% - when you do 100% it's not 100% of the screen its 100% of the parent container. try to style the body element to take the full-screen size and then style the bottom and navBottom with 100%.

body{
    width: 100vw;
}