I have adjusted a div to be 78% of the viewport height (78vh). Since there are 13 buttons, each button is set to be 6% of the viewport height (6vh) so that all 13 buttons should fit within the parent container size of 78vh. In Firefox, everything appears correctly, however in Google Chrome, the last button extends beyond the container. Can anyone explain why this might be happening? Please keep in mind that I am not well-versed in HTML, so a simple explanation would be greatly appreciated.
<body>
<div style="height:85vh;overflow:auto;background-color:green;margin-top:10vh;">
<div style="height:78vh;margin:2vh;background-color:white;">
<div class="visible-sm-block visible-md-block visible-lg-block" style="background-color:yellow;height:78vh;margin-right:66%;">
<button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
<br><button style="height:6vh; width:12vh"> 0 </button>
</div>
</div>
</div>
<script src="static/js/jquery.min.js"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
</body>