Flex item's child resolve its height set in percentages from the align-items stretch default value

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

by Konstantin Rouda

HTML

<div class="c-container">
  <div class="c-item">
    <div class="c-child">Child</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.c-container {
  display: flex;
  width: 500px;
  height: 700px;
  border: 1px solid green;
}

.c-item {
  flex-basis: 50%;
  border: 1px solid cornflowerblue;
}

.c-child {
  height: 100%;
  background: firebrick;
}

/*
https://www.w3.org/TR/css-flexbox-1/#algo-stretch
If the flex item has `align-self: stretch`,
redo layout for its contents, 
treating this used size as its definite cross size so that percentage-sized children can be resolved.
*/