Currently, I am constructing a footer for a mobile device that needs to feature 3 buttons closely aligned with no gaps in between.
The styling for the container is as follows:
.NavBar {
width: 100vw;
float: none;
display: flex;
height: 3rem;
overflow: hidden;
position: fixed;
bottom: 0;
z-index: 999;
}
And the button styling is defined like this:
.NavButton {
align-items: center;
justify-content: center;
background-color: #dddddd;
/* border: 1px solid black; */
border: none;
border-radius: 0;
/* float: left; */
display: flex;
flex-direction: column;
font-size: 1.5rem;
text-align: center;
flex-grow: 1;
margin: none;
font-family: Montserrat-Regular, Geneva
}
Given that each button has flex-grow: 1, one would expect them to expand and fill the entire screen width.
However, after implementation, a thin padding of about 1 pixel remains visible between each button.