fix(css): document stretch value (mdn#35262)

* fix(css): document `stretch` value * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya <[email protected]> * update descriptions and add notes * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya <[email protected]> * Update files/en-us/web/css/max-height/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review --------- Co-authored-by: Dipika Bhattacharya <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
meyerweb · Aug 16, 2024 · 9c6e189 · 9c6e189
1 parent 80a9cc8
commit 9c6e189
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 0 deletions.
diff --git a/files/en-us/web/css/height/index.md b/files/en-us/web/css/height/index.md
@@ -37,6 +37,7 @@ height: fit-content;
 height: fit-content(20em);
 height: auto;
 height: minmax(min-content, anchor-size(width));
+height: stretch;
 
 /* Global values */
 height: inherit;
@@ -62,6 +63,12 @@ height: unset;
   - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.
+- `stretch` {{Experimental_Inline}}
+
+  - : Sets the height of the element's [margin box](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) to the height of its [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
+
+    > [!NOTE]
+    > To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
 
 ## Accessibility
 

diff --git a/files/en-us/web/css/max-height/index.md b/files/en-us/web/css/max-height/index.md
@@ -30,6 +30,7 @@ max-height: max-content;
 max-height: min-content;
 max-height: fit-content;
 max-height: fit-content(20em);
+max-height: stretch;
 
 /* Global values */
 max-height: inherit;
@@ -55,6 +56,12 @@ max-height: unset;
   - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
+- `stretch` {{Experimental_Inline}}
+
+  - : Limits the maximum height of the element's [margin box](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) to the height of its [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
+
+    > [!NOTE]
+    > To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
 
 ## Accessibility
 

diff --git a/files/en-us/web/css/max-width/index.md b/files/en-us/web/css/max-width/index.md
@@ -30,6 +30,7 @@ max-width: max-content;
 max-width: min-content;
 max-width: fit-content;
 max-width: fit-content(20em);
+max-width: stretch;
 
 /* Global values */
 max-width: inherit;
@@ -55,6 +56,12 @@ max-width: unset;
   - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
+- `stretch` {{Experimental_Inline}}
+
+  - : Limits the maximum width of the element's [margin box](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) to the width of its [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
+
+    > [!NOTE]
+    > To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
 
 ## Accessibility
 

diff --git a/files/en-us/web/css/min-height/index.md b/files/en-us/web/css/min-height/index.md
@@ -29,6 +29,7 @@ min-height: max-content;
 min-height: min-content;
 min-height: fit-content;
 min-height: fit-content(20em);
+min-height: stretch;
 
 /* Global values */
 min-height: inherit;
@@ -54,6 +55,12 @@ min-height: unset;
   - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
+- `stretch` {{Experimental_Inline}}
+
+  - : Limits the minimum height of the element's [margin box](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) to the height of its [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
+
+    > [!NOTE]
+    > To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
 
 ## Formal definition
 

diff --git a/files/en-us/web/css/min-width/index.md b/files/en-us/web/css/min-width/index.md
@@ -29,6 +29,7 @@ min-width: max-content;
 min-width: min-content;
 min-width: fit-content;
 min-width: fit-content(20em);
+min-width: stretch;
 
 /* Global values */
 min-width: inherit;
@@ -58,6 +59,12 @@ min-width: unset;
   - : Use the available space, but not more than [`max-content`](/en-US/docs/Web/CSS/max-content), i.e. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
+- `stretch` {{Experimental_Inline}}
+
+  - : Limits the minimum width of the element's [margin box](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) to the width of its [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
+
+    > [!NOTE]
+    > To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
 
 ## Formal definition
 

diff --git a/files/en-us/web/css/width/index.md b/files/en-us/web/css/width/index.md
@@ -37,6 +37,7 @@ width: min-content;
 width: fit-content;
 width: fit-content(20em);
 width: auto;
+width: stretch;
 
 /* Global values */
 width: inherit;
@@ -62,6 +63,12 @@ width: unset;
   - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.
+- `stretch` {{Experimental_Inline}}
+
+  - : Sets the width of the element's [margin box](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) to the width of its [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to `100%` but applying the resulting size to the margin box rather than the box determined by [box-sizing](/en-US/docs/Web/CSS/box-sizing).
+
+    > [!NOTE]
+    > To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
 
 ## Accessibility