Question 309100 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

3

Answers


  1. 0

    Remove the height: 100% and set align-self: normal

    This will basically "reset" the align property of the parent, and make the child behave as if that align-items: center wasn’t set.

    If you need the content of the child-flex be in the center vertically, then you can set the align-items: center;

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

.child-flex {
  display: flex;
  background-color: blue;
  align-self: normal;
  /* add this for centered content */
  /* align-items: center; */
}

.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>
    Login or Signup to reply.
  2. 0

    May be the minimalist change you can do is :

    just replace align-items: stretch; in you class .parent, then remove
    height: 100%; in child-flex

    .parent {
  display: flex;
  width: 100%;
  background-color: gray;
  align-items: stretch;
  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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search