Re: [csswg-drafts] [css-flexbox-1] Inconsistent sizing of replaced elements in flex containers (#12012)

> > So height: 100% on the image computes to auto
> 
> No, it behaves as auto but doesn't compute to auto (on an element with children you could confirm this using inheritance). CSS2 used the same term for both behaviors, this terminology is now obsolete.

I don't quite follow.

According to [§3.2.1](https://drafts.csswg.org/css-sizing-3/#behave-auto):

> To have a common term for both when width/height computes to auto and when it is defined to behave as if auto were specified (as in the case of block percentage heights resolving against an indefinite size, see CSS2§10.5), the property is said to *behave as auto* in both of these cases.

So *"behave as auto"* is a general term for two things:

a) when width/height **computes** to `auto`  
b) when it’s **defined to behave as if** `auto` were specified — e.g. when a percentage height is used against an indefinite container

If `height: 100%` falls into case (b), then it's supposed to behave *as if* `height: auto` were specified.

But here’s where I’m confused. Take this example:

```html
<div style="display: flex; max-width: 500px; font-family: Arial;">
  <div>
    Lorem ipsum dolor sit amet...
  </div>
  <img src="box.jpg" alt="box" style="width: 50%; height: auto;" />
</div>
```

The image has `height: auto`, and yet it **does** stretch — even though no height is explicitly set on the flex container.

So if `height: 100%` is defined to *behave as if auto were specified*, and `auto` results in stretching here, then shouldn’t `100%` also stretch?

But from  [#4525](https://github.com/w3c/csswg-drafts/issues/4525) — and [issue #4312](https://github.com/w3c/csswg-drafts/issues/4312#issuecomment-577645403) — it sounds like stretching *should not* occur in the `height: 100%` case. 

So what does *'behave as auto'* actually mean? The current definition suggests an equivalence that doesn't hold up in practice.

---

> > Both items have by default have flex factor of 0 (flex-grow)
> 
> You already quoted the spec that says you need to use the flex shrink factor here, which is not zero.

I understand that the flex line overflows the container’s main size, so the flex-shrink factor is used. What I don’t understand is the need for the condition *'Any item that has a flex factor of zero'*.

An item can have a shrink factor >= 1 and a grow factor of 0, or vice versa. But why 'flex factor of 0' is relevant here?

In the context of [9.7(3)](https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths), what actually matters is:

- If using the grow factor: any item whose flex base size is greater than its hypothetical main size  
- If using the shrink factor: any item whose flex base size is smaller than its hypothetical main size

In the example, neither item satisfies the second condition, so we don’t freeze them — makes sense.

Why do we need the sentence *“Any item that has a flex factor of zero”*? Simply put, If we remove that line entirely, would the algorithm’s behavior actually change?






-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12012#issuecomment-2759730204 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 27 March 2025 22:55:08 UTC