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; }<div class="flex"><div class="left">Left</div><div class="right">Right</div></div>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?