Skip to content

[css-flexbox] Flex basis and box-sizing #316

Closed
@fantasai

Description

I noticed a problem while working with flexbox last week:

<div style="display: flex">
    <div style="flex: 2"></div>
    <div style="flex: 1"></div>
</div>

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...

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions