Search code examples
htmlcssgoogle-chromeviewport-units

Why does my button overflow the container in Chrome?

I have set a div to size 78vh. 78/13 = 6 For each button, I did a size 6vh so all 13 of them should fit within 78vh. In Firefox, everything looks nice, however in Google Chrome the last button goes beyond. Does anyone know why? Please note I am not an HTML developer, so a simple explanation would mean a lot to me.

<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>

enter image description here

Solution

  • Remove <br> tags and add 'display:block;' style for buttons.