CODEWITHSUNDEEP
htmlcssflexbox
Karina Shulan
Karina Shulan

Reputation: 159

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

I have a two divs, Parent and Child.

And I need to make Child fill all available height of Parent.

But for some reason I have this padding at the bottom.

I can remove it only when I use height 105% for Child

But this is obviously not the best solution.

I tried to use align-items: stretch, but it didn't do anything.

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

enter image description here

Upvotes: 1

Views: 1765

Answers (3)

Michael Martell
Michael Martell

Reputation: 360

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.

Upvotes: 0

Kameron
Kameron

Reputation: 10846

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>

Upvotes: 2

Lab
Lab

Reputation: 49

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>

Upvotes: 0

Related Questions