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

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>

CodePudding user response：

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;
}

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

CodePudding user response：

The width or height of the parent container needs to be specific/absolute. So intead of setting the height of the parent to 92%, you can try 92vh.

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

CodePudding user response：

Here's a few basics already laid out. I reformatted it a bit too for readability. You had background-color as backgroundColor, as well as 100% to '100%'.

If you take this as a basis, just change the width and height of it to 100% and you should have no problem. The larger change was setting the position, and ensuring that you'r setting a height and width.

<body style="position: absolute; padding: 0; margin: 0; width: 100vw; height: 100vh; background-color: aquamarine; display: flex; justify-content: center;">

 <div style="
    position: relative;
    width: 70%; 
    height: 70%;  
    align-self: center;
    box-sizing: content-box;
    border: 2px solid grey;
    background-color: aliceblue;
    display: flex;
    justify-content: center;">
    <div style = "
        position:relative;
        align-self: center;
        height: 80%; 
        width: 80%;
        background-color: red;">
    </div>
 </div>
</body>

I added a few styles to the body as well to help with understanding what's happening.