[css-flexbox] Flex basis and box-sizing

[fantasai]

I noticed a problem while working with flexbox last week:

If we add padding or borders, the flex items are not actually distributed at thirds according to the algorithm, even if box-sizing is set to border-box. This is in direct contradiction to our examples/descriptions in https://www.w3.org/TR/css-flexbox-1/#flex-common

The way things are, it's not possible to get things to align unless you do some fancy math with the padding and borders... the avoidance of which is exactly the point of having the box-sizing property. I'm somewhat afraid it's not possible to fix this anymore. :( But for sure it's got to be annoying for authors...

[p2227]

you can read this: http://stackoverflow.com/questions/34753491/how-does-flex-shrink-factor-in-padding-and-border-box

[tabatkins]

Yeah, it would be nice if flex would work with the box-sizing property, but it does complicate things; the border+padding would have to act as an additional min-size constraint, effectively.

I'm also very unsure whether it's compatible to make such a change now. Perhaps we could add a property switch that makes it pay attention?

[fantasai]

The original intent of flex: was to specify flexibility as absolute ratios... we're failing at that if we don't/can't make it work!

[fantasai]

@dholbert @cbiesinger @atanassov Comments here? Is this something we can fix?

[tabatkins]

In particular, would it be okay to make the necessary edits so that the following:

.flexbox {
  display: flex;
  width: 300px;
}
.flex-item {
  box-sizing: border-box;
  border: 20px;
}
.flex-item:nth-child(1) {
  flex: 1;
}
.flex-item:nth-child(2) {
  flex: 2;
}

results in the first item being 100px wide (20px border, 60px content, 20px border) and the second item being 200px wide (20px border, 160px content, 20px border)?

Today you instead, unfortunately, get the first item being 113px wide (20px border, 73px content, 20px border) and the second being 186px wide (20px border, 146px wide, 20px border), because they're distributing the 220px of free space in a 1:2 ratio.

[FremyCompany]

Adding myself to the thread, but given how many websites are using flexbox today combined with a framework that sets border-box on all elements by default, this breaking-change seems unlikely to be webcompatible to me.

Maybe adding flex-sizing: border-box | content-box | ... would work. Future frameworks could set it on by default. This isn't exactly a high-priority problem to solve though...

[fantasai]

True, but I think in most cases the current behavior is either unintended or unnoticed.

I think it's worth fixing if we can. This is the one place we screw up and effectively don't use border-box sizing even when you've specified it.

[css-meeting-bot]

The CSS Working Group just discussed Absolute flex ratio, and agreed to the following resolutions:

• RESOLVED: box-sizing is accounted for in the flex algorithm so that the flex ratios reflect the distribution of the specified box

The full IRC log of that discussion

Topic: Absolute flex ratio
github: https://github.com//issues/316
https://drafts.csswg.org/css-flexbox/issues-cr-20160526#issue-15
TabAtkins: one of the original things with flex, was relative & abs flexing
TabAtkins: absolute flex allowed you to setup a ratio of flexing. That works great as long as your margin/border/padding are 0
TabAtkins: it's impossible to do this because flexing always increases the content box size
TabAtkins: the total size of the elements end up not matching the ratio *gave an example*
TabAtkins: change the ratio to take box sizing into account
fantasai: they are actually, they take it into account but not correctly
fantasai: we use the margin box, so your starting point will be bigger than 0
fantasai: so we have to take margin/border/padding into account
Florian: is this web compatible
Florian: and box-sizing doesn't have 'margin-box'
TabAtkins: border is the important one here
TabAtkins: we think this is web compatible, the ratios are probably still close enough that they're not noticing differences right now
fantasai: they set box-sizing on *
TabAtkins: if it turns out that this is not web compatible we can come up with a different solution
TabAtkins: but we'd like to try and use that first rather than introduce new things
TabAtkins: we wanted working group approval
fantasai: I think a lot of these sites are slightly off and will probably be slightly improved
Rossen: do we have interop
TabAtkins: we do
TabAtkins: but it would be a better improvement, hopefully
dbaron: who's going to make the change first?
dbaron: I think I'd like someone to be the first implementation as we are normally hesitant
Florian proposes the browser with dominant market share
TabAtkins: guaranteed not to affect how boxes wrap or are arranged, just slight difference in how they are sized
astearns: those with web compat concerns, any objections
TabAtkins: I'm pretty confident that I can volunteer Christian to try it
astearns: any objections?...
Rossen: well - yes
Rossen: I would like to believe it, but I'd hate to have you start flooding this and then they fix it and they do, and then we change our mind later on then
fantasai: I'm pretty confident this is the right thing to do for the web
s/first?/first? We have a record of making changes that are possibly risky and then nobody willing to be the first implementer./
Rossen: I have no problem with anyone trying it
fantasai: I think we need the spec to change for anyone to do it
Florian: put a note in there to provide feedback on it
TabAtkins: we've done that before, implementations please test is it and send it back
Rossen: with a note would be better
PROPOSED RESOLUTION: Include box-sizing in flex sizing with a note
RESOLVED: box-sizing is accounted for in the flex algorithm so that the flex ratios reflect the distribution of the specified box

[fantasai]

CSSWG resolved to try to fix this! Blink team has volunteered to try implementing; if they can pull it off without breaking anything, other vendors will follow.

[astearns]

Reopening for testcase need.

[MartinMa]

Just to be clear. The behavior has not change since this issue report right? The example given by @tabatkins still leads to a distribution of 113px and 187px with a 300px-wide flexbox with two border-box-enabled items that have a border of 20px in a flex ratio of 1:2.

I made a quick pen to demonstrate the issue again:
https://codepen.io/MartinMa/pen/bGdMrjx

The spec reads

When determining the flex base size, the item’s min and max main sizes are ignored (no clamping occurs). Furthermore, the sizing calculations that floor the content box size at zero when applying box-sizing are also ignored. (For example, an item with a specified size of zero, positive padding, and box-sizing: border-box will have an outer flex base size of zero—and hence a negative inner flex base size.)

So can we agree that box-sizing: border-box is essentially ignored?

[jonjohnjohnson]

@cbiesinger I can't find any ticket in Blinks tracker that relates to the resolution/commit discussed here.

Since @tabatkins mentioned volunteering your efforts for the change in Blink and you've recently worked on flex/box-sizing interactions with aspect-ratio (https://bugs.chromium.org/p/chromium/issues/detail?id=1166834 / ede56bd#r40863567), I'm wondering if you have any ideas on the state of this issue?

cc @fantasai

[rinarakaki]

Any update?

[cbiesinger]

cc @davidsgrogan , I haven't worked on flex in several years now