3

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>
sdym
  • 218
  • 2
  • 16

4 Answers4

1

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>
huan feng
  • 7,307
  • 2
  • 32
  • 56
  • Thanks, it's the closest answer which changes the layout as little as possible. But I still wonder someone can explain why div is okay in this case. – sdym Sep 01 '20 at 08:35
0

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;
}
Riddhi
  • 755
  • 11
  • 31
  • Have you tried this and got it to work? It doesn't make any difference when it is added to the code in the question, so please update your answer to explain how to get it to work. – FluffyKitten Sep 01 '20 at 05:23
  • @FluffyKitten, yes I already tried this solution in codepen, it worked for me. – Riddhi Sep 01 '20 at 05:55
  • 1
    As I said, it doesn't work when added to the Stack Snippet in the question, so please explain how the OP can get it to work in their code here. – FluffyKitten Sep 01 '20 at 05:57
  • @Riddhi, I also tried your suggestion in codepen, it didn't work – sdym Sep 01 '20 at 06:29
  • @Riddhi looks like the key is changing the padding from percentage to pixel – sdym Sep 02 '20 at 01:31
  • 1
    yes @Yung-DaLinLynda, you are correct, I tried my last solution as you said earlier, it wasn't work, yes it works sometime, it doesn't, so I implement another one which is this... and if you remove padding totally it will also work... – Riddhi Sep 02 '20 at 04:18
0

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.

gpl
  • 1,380
  • 2
  • 8
  • 24
  • The reason I didn't expand the button to full width is that I actually have another button aside (which I removed for simplicity). In my case, I use `justify-content: space-between` & `align-items: baseline` to arrange two elements. I knew expanding to full or adding `flex-grow` solves but it is not what I want. – sdym Sep 01 '20 at 06:36
0

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

Victor Santizo
  • 1,145
  • 2
  • 7
  • 16
  • Thanks, it seems to work, while the layout changes Can anyone explain the miracle? btw, it should be `inline-flex` – sdym Sep 01 '20 at 08:33