[css-flexbox] "their sizes will be proportional" nit

(Substitute width for height below if you want a different main dimension)

Section 7.2 describes this shorthand:

---
Œflex: <positive-number>¹
    Equivalent to Œflex: <positive-number> 1 0px¹. Makes the flex item
flexible and sets the flex basis to zero, resulting in an item that
receives the specified proportion of the free space in the flex container.
If all items in the flex container use this pattern, their sizes will be
proportional to the specified flex factor.
---


The last sentence is true only if the flex items do not have min-width or
max-width set (and the next paragraph advises you to set min-width).
Perhaps this is a bug, but it's consistent in both Blink and Gecko. If
it's not a bug, then the sentence should be qualified or deleted.

If I have two flex items with this styling:

.flex-one {
  min-width: 100px;
  flex: 1;
}

.flex-five {
  min-width: 100px;
  flex: 5;
}


And the container starts at 200px wide, as the container grows .flex-five
takes up all of the extra space until it's 500px wide. It's only at that
point that .flex-one starts growing. The sizes are not proportional to the
specified flex factor until the proportion is first reached.

And if the flex items have max-width:

.flex-one {
  max-width: 100px;
  flex: 1;
}

.flex-five {
  max-width: 100px;
  flex: 5;
}


Then as the container shrinks from 200px wide .flex-one does all the
shrinking until it's 20px wide. So again the sizes are not proportional
until the proportion is first reached.

Thanks,

Alan

Received on Wednesday, 24 April 2013 01:20:34 UTC