Menu
Here's my code, I've simplified the structure.
So we can focus on the difference between button and div
I have no idea why the text inside button will overflow and be cropped.
The button doesn't grow up to fit the content but the div does.
(I find this problem on Windows Chrome, while Firefox seems to be okay)
My workaround solution is to replace button with div.
I wonder if someone can explain the difference between button and div
Why div is okay with the same style?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flexbox {
display: flex;
}
.btn {
display: inline-block;
background-color: #dc447d;
border: 0 solid #dc447d;
padding: 0 3%;
line-height: 1.63em;
font-size: 17.2px;
color: white;
border-radius: 5px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="flexbox">
<button class="btn">
<span>Start Free Trial</span>
</button>
</div>
<div class="flexbox">
<div class="btn">
<span>Start Free Trial</span>
</div>
</div>
</body>
</html>
655
asked Jun 17 '26 06:06
Change padding to a number value should fix the issue.
Padding percentage is based on the parent element’s width
padding: 0 10px
.flexbox {
display: flex;
}
.btn {
display: inline-block;
background-color: #dc447d;
border: 0 solid #dc447d;
padding: 0 10px;
line-height: 1.63em;
font-size: 17.2px;
color: white;
border-radius: 5px;
white-space: nowrap;
}<div class="flexbox">
<button class="btn">
<span>Start Free Trial</span>
</button>
</div>
<div class="flexbox">
<div class="btn">
<span>Start Free Trial</span>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
