Stretch one item to the available height

Question

I've found multiple stack overflow solutions that suggest to use align stretch in order to make one child occupy the rest of the available container height, but can't make it work for now.

P.S: I would like to keep the position absolution on the parent container.

.parent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background-color: lightgrey;
}

.child-1 {
  background-color: green;
  width: 100%;
}

.child-2 {
  background-color: yellow;
  width: 100%;
  align-self: stretch;
}

<div class='parent'>
  <div class='child-1'>no need to stretch</div>
  <div class='child-2'>would be nice to stretch to rest of available height</div>
</div>

giving `child-2 { height: 100% }` should work actually – CapitanFindus May 18 '20 at 21:31 — CapitanFindus, May 18 '20 at 21:31

score 1 · Accepted Answer · answered May 18 '20 at 21:35

You can do that by giving to the second child 100% height.

.parent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background-color: lightgrey;
}

.child-1 {
  background-color: green;
  width: 100%;
}

.child-2 {
  background-color: yellow;
  width: 100%;
  height:100%
}

<div class='parent'>
  <div class='child-1'>no need to stretch</div>
  <div class='child-2'>would be nice to stretch to rest of available height</div>
</div>

Stretch one item to the available height

1 Answers1