https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
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: stretch stretches against the containing block, while align-self: stretch doesn't stretch.
- Once we know the size of the flex lines:
height: stretch keeps stretching against the containing block, while align-self: stretch stretches 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-self stretches in the latter one:
-
WebKit does that thing of stretching all ancestors with indefinite size, in this case filling the window:
https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
We have interoperability against this:
Gecko, Blink and WebKit agree:
height: stretchstretches against the containing block, whilealign-self: stretchdoesn't stretch.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: