How to make child fill all avaliable height of parent in flex

April 20, 2022

I have two <div> elements, a parent and a child; I need to make the child fill all the available height of the parent.

For some reason I have this padding at the bottom, though; and I can only remove it by setting height 105% for the child.

This is obviously not the best solution. I tried to use align-items: stretch, but it didn’t do anything.

If maybe someone knows how to fix this issue I would be very grateful.

<div style="width: 100%;
              height: 92%;
              display: flex;
              flex-direction: row;
              box-sizing: content-box;
            ">
  <div style="height: '100%';
              backgroundColor:'red';
              ">
  </div>
</div>

>Solution :

Use flex-basis: 100%; on the flex item.

html,
body {
  margin: 0;
  height: 100%;
}

body>div:first-child {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: content-box;
}

div>div {
  flex-basis: 100%;
  background-color: red;
}

<div>
  <div>foo</div>
</div>

You can see from the second example below it works despite having a static or dynamic sized parent.

body>div:first-child {
  width: 800px;
  height: 400px;
  display: flex;
  flex-direction: row;
  box-sizing: content-box;
}

div>div {
  flex-basis: 100%;
  background-color: red;
}