Bug 91434 – "box-sizing" partly ignored inside flexbox

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 152625 [details]
Test case

Scenario

Two flexbox containers (`display: -webkit-flex`), each having a child element with a fixed square size and border defined. The one container has `-webkit-flex-direction: row` whereas the other has `-webkit-flex-direction: column`. There is a universal `box-sizing: border-box` rule.

Problem

The children are not square: `border-box` is only applied with respect to the cross axis, but is ignored with respect to the main axis. The children have their border added to their defined size with respect to the main axis, whereas the border is part of the defined size with respect to the cross axis. The children have sizes of 70x50 and 50x70, respectively, due to two 10px borders only added in the main axis direction.

Setting `-webkit-flex-basis` doesn't help, although MDN states that it should honour box-sizing:

https://developer.mozilla.org/en/CSS/flex-basis
"flex-basis determines the size of the content-box unless specified otherwise using box-sizing."

I've attached a test case.

[Jon Lee]

The test case appears fixed.

[Ahmad Saleem]

I am unable to reproduce this bug using attached test case and also updated test case without -webkit- prefixes as below:

Link - https://jsfiddle.net/m09thrns/show

All browsers (Safari 16.1, Chrome Canary 109 and Firefox Nightly 108) match each other. Marking this as "RESOLVED CONFIGURATION CHANGED".

Please reopen, if it is not fixed with updated test case. Thanks!