NO BUG: Came across a problem about the border-box

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hi team,

I was trying to use two buttons in a flex box

image
image1038Ă—641 27.3 KB

There are some rendering bugs for which I have created another bug, but that’s not the point here.

The thing is I wanna create two different styled buttons that are same high, but it doesn’t work, I don’t know what’s wrong, I have made the box-sizng border-box.

image
image1693Ă—750 107 KB

Below are the 2 buttons screenshot I made using vs code, which is what I want.

image

2

Hi Mezzy,
Thanks again for your report!

To be honest, I don’t see a bug here either. Box sizing has nothing to do with your desire to give both buttons the same height, especially since box sizing: border-box is applied to all elements by default anyway.

image

  1. Either give the wrapper align-items: stretch so that all elements inside it stretch

    image
    image2546Ă—1282 175 KB

  2. Or set the first button to align-self: stretch

    image
    image2542Ă—1106 154 KB

Best regards,
timmse

3

I use the same code in the vscode and it worked, I don’t why it didn’t work when it comes to the wordpress

4

It probably won’t be identical, but it’s hard to say without the code :slight_smile: