Skip to content

[css-flexbox] min/max-content sizes of flex item should take definite cross size into account, right? #11791

@Loirooriol

Description

@Loirooriol

What should the flex base size be here?

<!DOCTYPE html>
<div style="display: flex; width: 100px; height: 100px; background: red">
  <div style="min-width: 0; background: green">
    <canvas width="10" height="10" style="height: 100%"></canvas>
  </div>
</div>
Blink WebKit, Gecko

I plan to align Servo with Blink, which is the behavior that makes sense to me.

The spec is not particularly clear, though: https://drafts.csswg.org/css-flexbox-1/#flex-base-size

A. If the item has a definite used flex basis

Not definite

B. If the flex item has ...

No preferred aspect ratio

C. If [...] the flex container is being sized under a min-content or max-content constraint

Not the case.

D. Otherwise, if [...] the available main size is infinite,

Nope

E. Otherwise, size the item into the available space using its used flex basis in place of its main size, treating a value of content as max-content.

Sure, browsers still disagree if I use flex-basis: max-content directly.

If a cross size is needed to determine the main size (e.g. when the flex item’s main size is in its block axis, or when it has a preferred aspect ratio) and the flex item’s cross size is auto and not definite, in this calculation use fit-content as the flex item’s cross size. The flex base size is the item’s resulting main size.

OK, so here we need a cross size, to resolve the canvas percentage. The preferred cross size is auto but definite, so I shouldn't use fit-content. So I'm assuming I should use the definite cross size: https://drafts.csswg.org/css-flexbox-1/#definite-sizes

If a single-line flex container has a definite cross size, the automatic preferred outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions