CSS: button inside flexbox has smaller width than the content

user_4796585 0
Viewed 1177

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>

flexbox css html
4 Answers

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>

user_39436320

Here is my updated solution here, I've make my codepen link please refer it.

.btn {
  display: inline-block;
  background-color: #dc447d;
  border: 0 solid #dc447d;
  padding: 0 15px;
  line-height: 1.63em;
  font-size: 17.2px;
  color: white;
  border-radius: 5px;
  white-space: nowrap;
}
user_72012650

Check out this snippet:

.flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn {
    width: 100%;
    text-align: center;
    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;
}
<!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>
</head>
<body>
    <div class="flexbox">
        <button class="btn">
            <span>Start Free Trial</span>
        </button>
    </div>
    <br>
    <div class="flexbox">
        <div class="btn">
            <span>Start Free Trial</span>
        </div>
    </div>
</body>
</html>

First thing first, I have added extra <br/> just to display things properly with clear borders.

Now inside .flexbox css, justify-content: center; and align-items: center; are used to align contents perfectly at the center of flex-box.

Furthermore, inside .btn width: 100%; is used to make the content width up to the 100% of flex-box. You can alter this and can also play with height: 100% property if you want, for which you need to increase the height of flex-box.

Finally text-align: center; is used for <div class="btn"> only, to center its content's horizontally.

user_138281240 

.flexbox {
  display: inline 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;
}

.

Using inline flex instead of flex fixes the issue.

user_141935500
Related