CODEWITHSUNDEEP
htmlcssgoogle-chromeviewport-units
Testing man
Testing man

Reputation: 741

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

Upvotes: 0

Views: 581

Answers (2)

Mike Stringfellow
Mike Stringfellow

Reputation: 497

This is down to the <br /> tags between the buttons. It appears that, in Chrome at least, the <br /> tag is changing height in steps as the height of the window changes. This makes the combined height of the buttons look either too little or too much.

A way of getting around this would be to remove the <br /> tags and set the CSS display property of the buttons to block.

This Fiddle shows the difference between the two approaches: https://jsfiddle.net/0f5y1vj8/. The method with the <br /> tags is on the right. Try changing the height of the result pane and you'll see how the spacing between the buttons changes.

Upvotes: 1

andfra
andfra

Reputation: 163

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

Upvotes: 1

Related Questions