- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Mon, 13 Jan 2025 12:49:40 +0000
- To: public-css-archive@w3.org
Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-sizing] `stretch` size for tables with caption ==
```html
<!DOCTYPE HTML>
<style>
table {
width: -moz-available; width: -webkit-fill-available; width: stretch;
height: -moz-available; height: -webkit-fill-available; height: stretch;
}
</style>
<div style="height: 150px; width: 150px; border: 5px solid">
<table style="border: 5px solid cyan; padding: 5px">
<caption style="border: 5px solid magenta; padding: 5px">caption</caption>
<td style="height: 50px; border: 5px solid orange; padding: 5px">cell</td>
</table>
</div>
```
| Blink | WebKit, Gecko, Servo |
| - | - |
|  |  |
https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
> in [formatting contexts](https://drafts.csswg.org/css-display-4/#formatting-context) and axes in which the relevant [self-alignment property](https://drafts.csswg.org/css-align-3/#self-alignment-properties) does not apply (such as the block axis in Block Layout, or the main axis in Flex Layout), in cases where a percentage size in that axis would resolve to a definite value, a [stretch-fit size](https://drafts.csswg.org/css-sizing-3/#stretch-fit-size) causes the box to attempt to fill its containing block—**behaving as 100%** but applying the resulting size to its margin box instead of the box indicated by [box-sizing](https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing).
This implies that WebKit&Gecko&Servo are correct, but arguably Blink looks better. I suspect this may need something a la https://drafts.csswg.org/css-flexbox-1/#flex-items
> the flex item’s final size is calculated by performing layout as if the distance between the table wrapper box’s edges and the table box’s content edges were all part of the table box’s border+padding area
That seems more annoying to implement, though.
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11489 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 13 January 2025 12:49:40 UTC