Flexbox item refusing to grow-CodePudding

I'm trying to make a calculator website (codesandbox here). I have a problem where the decimal button on the calculator is not growing; for some reason it's smushed.

I'm using flexbox to display and align all the rows and buttons on the calculator. What I want is the zero button to be twice as big as the other number buttons. I want the operator buttons (=, , etc.) to be aligned with each other as well.

I've tried messing around with width and flex css properties on my classes to no avail. I'm sure the solution is simple but for some reason it's eluding me.

Thank you for your time reading this. I appreciate any help you can give me.

CodePudding user response：

The flex-grow CSS property sets the flex grow factor of a flex item's main size.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

.decimal-button,
.equals-button {
  flex: 1;
}

.zero-button {
  flex: 2;
}