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

> 
> > Why does the image not stretch when `height:100%`?
> 
> `align-self: stretch` requires the cross size property to compute to `auto`.

Correct, but per [CSS2 §10.5](https://drafts.csswg.org/css2/#the-height-property):

> *Specifies a percentage height. The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`.*

So `height: 100%` on the image *computes to `auto`* if its containing block doesn’t have a definite height. 

This is also shown in [Example 11 of CSS Sizing Level 4](https://drafts.csswg.org/css-sizing-4/#valdef-height-stretch):

> *In this example, the container’s height is indefinite, which causes a percentage height on the child to behave as auto, so height: stretch behaves as auto as well.*  
```css
.parent { height: auto; margin: 0; }
.child  { height: stretch; margin: 10px; }
```

In the examples provided, the flex container (e.g containing block) has an indefinite height, so `height: 100%` on the image is expected to compute to `auto`—but the item still doesn’t stretch.




-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12012#issuecomment-2758935310 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 17:43:29 UTC