-
Notifications
You must be signed in to change notification settings - Fork 733
Description
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.