Re: [css3-flexbox] auto margins and flex-align: baseline

On 04/04/2012 06:06 PM, Tab Atkins Jr. wrote:
> On Wed, Apr 4, 2012 at 4:47 PM, Ojan Vafai <ojan@chromium.org> wrote:
>> Why does it make sense to do this? margin:auto is the legacy api for
>> centering. flex-align/flex-pack are more explicit and easier to understand.
>> Why not have non-auto flex-align/flex-pack cause margin:auto to be ignored?
> 
> I think either way is fine, but I'm actually somewhat partial to the
> current spec ordering.  It keeps the box-model property effects as
> close together as possible - non-auto margins have their effect in the
> very beginning when figuring out free space, and then auto margins
> have their effect immediately after flexing.
[...]
> 
> This seems to be a minor detail with no real effect on functionality,
> and I'm attempting to stabilize this spec ASAP for Last Call, so I'd
> prefer to do nothing with this feedback.  That okay?

I'm a bit worried on this -- the spec is still confusing on the behavior
of auto margins on baseline-aligned items, IMHO -- I think it needs some
clarification.  Moreover, to the extent that this behavior is defined,
it can easily lead to content overflowing its its flexbox line (and its
flexbox, if the flexbox is auto-sized), and I think that's also bad.

Details:
========
The definition of "flex-item-align: baseline" doesn't give any special
treatment to auto margins at all:

  # 8.3. Cross-axis Alignment: the 'flex-align' and
  #     'flex-item-align' properties
  # [...]
  # 'baseline'
  # [...] it participates in baseline alignment: all participating
  # flexbox items on the line are aligned such that their baselines
  # align, and the item with the largest distance between its
  # baseline and its cross-start margin edge is placed flush
  # against the cross-start edge of the line.

BUT, in contrast, the chunk on sizing a flexbox line *DOES* give special
treatment to baseline-aligned items with auto margins (though it's
unclear why):

  # 9.4. Cross size determination
  #  8. Calculate the cross size of each flexbox line.
  #  [...]
  #  1. Collect all the flexbox items whose inline-axis is parallel
  #     to the main-axis, whose 'flex-item-align' is 'baseline',
  #     and whose cross-axis margins are both non-'auto'.

If we follow the above chunks of spec, we can easily end up overflowing,
IIUC.  When we expand the "margin-top:auto" of a baseline-aligned item
in a horizontal flexbox, and then we do baseline-alignment, we can
easily end up with a baseline-alignment position that's lower than we
initially anticipated.  (potentially much lower, depending on the content)

Assuming I'm understanding this correctly: I think it's pretty bad for
an auto-height horizontal flexbox container to have its children
overflow its lower edge.  I'd like to resolve this somehow.

~Daniel

Received on Thursday, 17 May 2012 22:02:15 UTC