Open
Description
https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
- If used in an axis where the relevant self-alignment property applies to the element
Produces the same size that would be obtained by the self-alignment property in that axis being set to stretch and all sizing properties and aspect-ratio being set to their initial values.
We have interoperability against this:
<!DOCTYPE html>
<style>
.container { display: inline-flex; vertical-align: top; width: 100px; height: 100px; border: solid; flex-wrap: wrap; align-content: start }
.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch }
</style>
<div class="container">
<div class="stretch" style="width: 75px; border: solid cyan">a</div>
<div class="stretch" style="width: 75px; border: solid magenta">b</div>
</div>
<div class="container">
<div class="stretch" style="width: 75px; border: solid cyan">a</div>
<div style="border: solid orange; height: 150px"></div>
<div class="stretch" style="width: 75px; border: solid magenta">b</div>
</div>
<div class="container">
<div style="width: 75px; border: solid cyan;">a</div>
<div style="width: 75px; border: solid magenta">b</div>
</div>
<div class="container">
<div style="width: 75px; border: solid cyan;">a</div>
<div style="border: solid orange; height: 150px"></div>
<div style="width: 75px; border: solid magenta">b</div>
</div>Gecko, Blink and WebKit agree:
- When computing the size of the flex lines:
height: stretchstretches against the containing block, whilealign-self: stretchdoesn't stretch. - Once we know the size of the flex lines:
height: stretchkeeps stretching against the containing block, whilealign-self: stretchstretches against the line.
If the flex container doesn't have a definite height (remove height: 100px):
-
Gecko and Blink don't stretch
height: stretch, neither when computing line sizes nor once we know their size.align-selfstretches in the latter one:
-
WebKit does that thing of stretching all ancestors with indefinite size, in this case filling the window:
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Regular agenda