Skip to content

Commit 9c6e189

Browse files
OnkarRuikardipikabhgithub-actions[bot]
authored
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>
1 parent 80a9cc8 commit 9c6e189

File tree

6 files changed

+42
-0
lines changed

6 files changed

+42
-0
lines changed

files/en-us/web/css/height/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ height: fit-content;
3737
height: fit-content(20em);
3838
height: auto;
3939
height: minmax(min-content, anchor-size(width));
40+
height: stretch;
4041

4142
/* Global values */
4243
height: inherit;
@@ -62,6 +63,12 @@ height: unset;
6263
- : 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))`.
6364
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
6465
- : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.
66+
- `stretch` {{Experimental_Inline}}
67+
68+
- : 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).
69+
70+
> [!NOTE]
71+
> To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
6572

6673
## Accessibility
6774

files/en-us/web/css/max-height/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ max-height: max-content;
3030
max-height: min-content;
3131
max-height: fit-content;
3232
max-height: fit-content(20em);
33+
max-height: stretch;
3334

3435
/* Global values */
3536
max-height: inherit;
@@ -55,6 +56,12 @@ max-height: unset;
5556
- : 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))`.
5657
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
5758
- : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
59+
- `stretch` {{Experimental_Inline}}
60+
61+
- : 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).
62+
63+
> [!NOTE]
64+
> To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
5865

5966
## Accessibility
6067

files/en-us/web/css/max-width/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ max-width: max-content;
3030
max-width: min-content;
3131
max-width: fit-content;
3232
max-width: fit-content(20em);
33+
max-width: stretch;
3334

3435
/* Global values */
3536
max-width: inherit;
@@ -55,6 +56,12 @@ max-width: unset;
5556
- : 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))`.
5657
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
5758
- : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
59+
- `stretch` {{Experimental_Inline}}
60+
61+
- : 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).
62+
63+
> [!NOTE]
64+
> To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
5865

5966
## Accessibility
6067

files/en-us/web/css/min-height/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ min-height: max-content;
2929
min-height: min-content;
3030
min-height: fit-content;
3131
min-height: fit-content(20em);
32+
min-height: stretch;
3233

3334
/* Global values */
3435
min-height: inherit;
@@ -54,6 +55,12 @@ min-height: unset;
5455
- : 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))`.
5556
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
5657
- : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
58+
- `stretch` {{Experimental_Inline}}
59+
60+
- : 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).
61+
62+
> [!NOTE]
63+
> To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
5764

5865
## Formal definition
5966

files/en-us/web/css/min-width/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ min-width: max-content;
2929
min-width: min-content;
3030
min-width: fit-content;
3131
min-width: fit-content(20em);
32+
min-width: stretch;
3233

3334
/* Global values */
3435
min-width: inherit;
@@ -58,6 +59,12 @@ min-width: unset;
5859
- : 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))`.
5960
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
6061
- : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.
62+
- `stretch` {{Experimental_Inline}}
63+
64+
- : 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).
65+
66+
> [!NOTE]
67+
> To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
6168

6269
## Formal definition
6370

files/en-us/web/css/width/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ width: min-content;
3737
width: fit-content;
3838
width: fit-content(20em);
3939
width: auto;
40+
width: stretch;
4041

4142
/* Global values */
4243
width: inherit;
@@ -62,6 +63,12 @@ width: unset;
6263
- : 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))`.
6364
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
6465
- : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.
66+
- `stretch` {{Experimental_Inline}}
67+
68+
- : 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).
69+
70+
> [!NOTE]
71+
> To check aliases used by browsers for the `stretch` value and its implementation status, see the [Browser compatibility](#browser_compatibility) section.
6572

6673
## Accessibility
6774

0 commit comments

Comments
 (0)