Consider a simple 2 column flexbox setup using flex: 1 (or flex: 1 1 0% ) for both left and right column. The columns are normally the same size.

When you add unequal padding (see snippet), the columns are no longer the same size.

I have box-sizing: border-box and Gemini told me to try min-width: 0 (which I've had success with on occasion), neither of which worked.

* { box-sizing: border-box; }

.flex { display: flex; }

.flex > * { flex: 1 1 0%; min-width: 0; font-weight: bold; color: white;  }

.left { background: blue; padding: 5em; }
.right { background: red; }

  
Left
  
Right

Is this how flexbox is supposed to work? Why doesn't the box-sizing: border-box work here?

I'd prefer not to hard-code specific column widths. I should be able to add a third column to this layout to have three equal columns, without having to hard-code the width of every column?