[csswg-drafts] Add a new constrainted percentage size (height/width) (#12901)

jplevene has just created a new issue for https://github.com/w3c/csswg-drafts:

== Add a new constrainted percentage size (height/width) ==
To prevent an element from growing larger than it's parent that isn't constrained, a new size of constrained should be included as part of CSS size types.

```
.parent_grid {
   display:grid;
   grid-template-columns: auto auto 1fr;
   grid-template-rows: auto 1fr;
   height:auto; /* Not needed, but shows in this example that we want it to grow due to its cells content, but not all of them should influence this */
}

.last_cell_content: {
   height: constrained(100%);  /* This would prevent the cell being more than 100% of the parent height, regardless how high it's content is */
}

<div class="parent_grid">
   <div>Random stuff...</div>
   <div>More random stuff...</div>
   <div>Even more random sized stuff...</div>

   <div>Random stuff...</div>
   <div class="setter">Yet even more random sized stuff...</div>
   <div>
      <div class="last_cell_content">Last cell content with lots of content that is limited to the height of .setter</div>
   </div>
</div>
```

The above would mean that.last_cell_content can't be a greater height than its parent, which is not calculated by it's parent content, rather the other cells in the row, namely .setter in the above case.  It sees the last cell constrained, even though it is not.

Personally I think height:100% or even calc(100% - 0) should be deemed as being constrained, but it can't be changed now, so the best solution is to use a new type of percentage height that regards the parent as constrained.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12901 using your GitHub account


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

Received on Friday, 3 October 2025 16:51:52 UTC