Make a child HTML element fill it's parent container, both vertically and horizontally - (CSS & Flexbox)

Question

I cannot figure out how to make a child element (#child3) fill it's parent container both vertically and horizontally.

I've tried 100 different ways with and without Flexbox but I cannot figure out how to do this. Anybody know how this could be accomplished ?

#container{
        
  height: 50vh;
  width: 50%;
  min-width: 500px;
}
    
#container nav{
  height: 5rem;
}

#container nav ul{
  height: 100%;
  padding-left: 1rem;
  display: flex;
}

#container nav ul li{
  display: flex;
  align-items: center;
  padding: 0rem 2rem;
  height: 100%;
}

#container nav ul li:first-child{
  margin-left: -1rem;
}

#container nav ul li:last-child{
  margin-left: auto;
}
    
#child3{}

<section id="container">
    <nav>
        <ul>
            <li id="child1">Settings</li>
            <li id="child2">Account</li>
            <li><span id="child3" class="material-icons">close</span></li>
        </ul>
    </nav>
</section>

Do you mean _"fill up the entire parent"_ or _"fill up the remaining space of the parent"_? — soimon, Aug 18 '21 at 20:12
I'm not sure if I understand the difference. I would like the font icon to take match the exact size of it's parent element so that I can make it a link that is active if clicked anywhere in the container so the cursor does not have to be directly over the icon. Hopefully that clears up what I'm trying to do a little more. — nothing special, Aug 18 '21 at 20:20

score 0 · Answer 1 · answered Aug 18 '21 at 20:10

0

Try

#child3 {
  width: 100%;
  height: 100%;
}

Percentages are relative to the parent element.

answered Aug 18 '21 at 20:10

Harry Allen

385
4
13

Yeah that is the first thing I tried. Vertical height works but Width does not. Also, when applying height: 100% - the align-items: center breaks on the css formatting. – nothing special Aug 18 '21 at 20:16

score 0 · Answer 2 · answered Aug 18 '21 at 20:19

You just need to set width of #child3's parent to 100%. You can see it in code block.

#container{
        
  height: 50vh;
  width: 50%;
  min-width: 500px;
}
    
#container nav{
  height: 5rem;
}

#container nav ul{
  height: 100%;
  padding-left: 1rem;
  display: flex;
}

#container nav ul li{
  display: flex;
  align-items: center;
  padding: 0rem 2rem;
  height: 100%;
}

#container nav ul li:first-child{
  margin-left: -1rem;
}

#container nav ul li:last-child{
  margin-left: auto;
}
    
#child3{
  width: 100%;
  height: 100%;
  background: red;
}

.w-100 {
  width: 100%;
}

<section id="container">
    <nav>
        <ul>
            <li id="child1">Settings</li>
            <li id="child2">Account</li>
            <li class="w-100"><span id="child3" class="material-icons">close</span></li>
        </ul>
    </nav>
</section>

Recommend you to play this game to learn more about flexboxes.

This would be the same thing as applying 100% width to the pseudo-class "last-child" which would in turn break the margin-left: auto style. Which is no good. Fortunately Francis has the correct solution above. — nothing special, Aug 18 '21 at 20:36

score 0 · Accepted Answer · answered Aug 18 '21 at 20:22

If you just want to fill the parent just add the style for #child3

width: 100%;
height: 100%;

But if you want to fill the whole space of the parent, you should remove first the padding of the last child of the ul, add something here:

#container nav ul li:last-child{
      margin-left: auto;
      padding 0;
}

Then add 100% height and width in the #child3. But this will change the width of the parent of #child3 so you add padding to the #child3

Your code will look like this

#container{
  height: 50vh;
  width: 50%;
  min-width: 500px;
}
    
#container nav{
  height: 5rem;
}

#container nav ul{
  height: 100%;
  padding-left: 1rem;
  display: flex;
}

#container nav ul li{
  display: flex;
  align-items: center;
  padding: 0rem 2rem;
  height: 100%;
  
  /* just to view the size of the element */
  background: black;
  opacity: 50%;
}

#container nav ul li:first-child{
  margin-left: -1rem;
}

#container nav ul li:last-child{
  margin-left: auto;
  padding: 0;
}
    
#child3{
  height: 100%;
  width: 100%;
  padding: 0rem 2rem;
  
  /* just to view the size of the element */
  background: red;
  opacity: 50%;
}

<section id="container">
    <nav>
        <ul>
            <li id="child1">Settings</li>
            <li id="child2">Account</li>
            <li><span id="child3" class="material-icons">close</span></li>
        </ul>
    </nav>
</section>

Oh wow, thank you so much. This worked just as you said. So height and width 100% are referring to 100% of the size after padding has been accounted for. This sound right ? — nothing special, Aug 18 '21 at 20:29
yes, but my answer is not perfect tho, the vertical alignment of the text in the span changes, but it can be solved easily, so cheers. — Francis G, Aug 18 '21 at 20:31
Yeah, I added: display: flex and align-items: center; to the SPAN element which brought back the centering of the icon. — nothing special, Aug 18 '21 at 20:32

Make a child HTML element fill it's parent container, both vertically and horizontally - (CSS & Flexbox)

3 Answers3