How to make child fill all avaliable height of parent in flex
Question
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>
3 answers
solution1
1 ACCPTED 2022-04-20 16:44:45
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>
solution2
0 2022-04-20 16:40:55
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>
solution3
0 2022-04-20 16:47:31
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.