HTML/CSS Width Percentage, Divs inside divs

1

https://codepen.io/ychan052/pen/ExVvLpP

I need some explanations, if anyone can figure this out.

The logic of my CSS code goes like this:
I have a main tag, that is set to 100% of the page.
Then, I have a wrapper, that is set 50% of it.
Then, an input (’#champion-input) is set to 100% of the wrapper, which is exactly what you see.

But, here is where stuff goes wrong:
#match-list is inside a form which is inside the wrapper.
As you can see, setting that to 100%, for some reason, is not correctly changing it to the wrapper’s width. (The blue bar goes off)

Why is that?

The fix to it would be changing '#match-list’s width to 50%, but I do not understand why.

Thank you in advance!

2

An element’s position property has an effect on what its “containing block” is (you’d think it would always be the parent elements’ content box, but it’s not that simple). Your #match-list has has position absolute, which means its containing block is the closest positioned ancestor (with position other than static). In your code none of its ancestors are positioned, so I’m pretty sure it just defaults to view-port width. You can fix this by giving .wrapper a position, like position relative.

You can read more about the exact rules governing this behavior here:

2 Likes