Add a new constrainted percentage size (height/width)

[jplevene]

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.

<style>
.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 */
}
</style>
<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.

[Loirooriol]

I think you just want this:

.last_cell_content {
    height: 0;
    min-height: 100%;
}

First, height: 0 makes it contribute 0 to the row. min-height: 100% is resolved against zero so has no effect at this point.

But once we know the size of the row (from the other items), min-height: 100% stretches to that amount. min-height: stretch would be better but not widely supported yet.