Is there a way to make a flexbox item resize based on another item?

Issue

I have an item, represented here by an empty div called large-child, which has a fixed height. This then controls the height of the grey parent. What I want to do is to allow the child-flex to fill the space vertically, so i set it to 100%. That doesn't seem to work though, and the only way to make the child-flex box fill the space so far is to make it bigger than the large-child one.

Is there a way to make this work?

.parent {
  display: flex;
  width: 100%;
  background-color: gray;
  align-items: center;
  height: fit-content
}

.child-flex {
  display: flex;
  height: 100%;
  background-color: blue;
}

.large-child {
  background-color: red;
  width: 50px;
  height: 50px
}

<div class="parent">
  <div class="large-child"></div>
  <div class="child-flex">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </div>
</div>

Solution

What I want to do is to allow the .child-flex to fill the space vertically

You need to apply:

align-items: stretch;

to .parent.

Then you can apply:

align-items: center;

to .child-flex.

---

Working Example:

.parent {
  display: flex;
  justify-content: start;
  align-items: stretch;
  width: 100%;
  background-color: gray;
}

.child-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: blue;
}

.large-child {
  background-color: red;
  width: 50px;
  height: 50px
}

<div class="parent">
  <div class="large-child"></div>
  <div class="child-flex">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </div>
</div>

Answered By - Rounin