I want all of the flex items except last to just occupy their normal height and the last flex-item to occupy remaining height of the flexbox (stretch). But I have not been able to do that.
Following is what I have been trying:
.parent { display: flex; flex-wrap: wrap; /*align-content: start;*/ border: 1px solid green; height: 50vh } .child-height-auto { align-self: start; border: 1px solid red; width: 100%; } .child-height-strech { align-self: stretch; border: 1px solid blue; width: 100%; }<div class="parent"><div class="child-height-auto">I should occupy my normal height</div><div class="child-height-auto">I should occupy my normal height</div><div class="child-height-strech">I should occupy remaining height of the flexbox</div></div>