3

.item {
    box-sizing: border-box;
    width: 500px;
    height: 60px;
    background-color: blue;
    border: 20px solid red;
    padding: 10px;
    position: relative;
}

.child {
    width: 100%;
    background-color: yellow;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="item">
        <div class="child">

        </div>
    </div>
</body>
</html>

EDIT:

From: https://www.w3.org/TR/CSS22/visudet.html#the-width-property:

For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element. This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element.

Why is this this way? I am using border-box and the expectation is that i get 100% of the width of the parent container including the border. Does anyone know a way to include the border too?

The .child element is set to 100% width of the parent (which has width that is the sum of the content + padding + border because of the box-sizing: border-box property) but only takes the content + padding in account. Why it doesn't take the border? I know when I use top/left/bottom/right properties the positioning is relative to the padding edges of the element, but shouldn't the child respect the width of the border when it's set to 100%?

LearningMath
  • 851
  • 4
  • 15
  • 38
  • it takes into account the border, but **its** border not the parent border or any other element border – Temani Afif Mar 17 '19 at 08:48
  • @TemaniAfif I don't really get what you are trying to say, may you please elaborate more? I've read the question linked but it's still not clear to me why it is it logical the reference box to be the `padding box` and not include the border. If i have set `border-box` on the parent and the child, I expect when I say: "give me 100% width of the parent" , to have width that includes the parent's border because the border is included in the parent's width. – LearningMath Mar 17 '19 at 13:59
  • child and parent are different ... each border-box apply to each element without considering the other ... so each element is having border/padding/width and only those are considered ... we don't include the border of the parent element within the width calculation of the child. Add border to the child element then remove/add border-box and see the behavior and you will better understand – Temani Afif Mar 17 '19 at 14:01
  • I don't seem to get your point. My question is, what is the reasoning behind chosing the padding box to be the reference when calculating the child's width in both cases when parent is content-box and border-box. Why not the take the content or the border edges for reference to calculate the width? Why the padding edges? – LearningMath Mar 17 '19 at 14:13
  • `My question is, what is the reasoning behind` you should then ask the people who wrote the spec. If your question is why the spec is made like that, then it's off topic to this site because no one can answer this question. There is a lot of *why* in the CSS world and there is people working and deciding. As as side note and as you can read in the quote you linked from the spec this has changed from CSS1 to CSS2 which confirms that it's a matter of decision. – Temani Afif Mar 17 '19 at 14:23
  • Also you seems to missunderstand box-sizing ... if you say box-sizing:border-box you tell the browser to include the border in the width BUT the width is always calculated based on the padding-box of the parent. So 100% is always 100% of the padding-box of the parent and if you have border on the child element then they are included in that 100% if you set border-box and excluded if not. – Temani Afif Mar 17 '19 at 14:24
  • @TemaniAfif Yes I am aware of that, and understand it correctly. I just couldn't find the logic behind taking the `padding-box` for reference every time. I suppose it's just a decision like you said. Thanks for the help and have a nice day. – LearningMath Mar 17 '19 at 14:29

1 Answers1

2

This happens because the property width is explicitly defined as relative to content-box (default). Setting the parent's box-sizing as border-box doesn't change this behavior.

I believe the way to overcome this would be using outline property in order to make the border do not consume space.

See a possible alternative below:

<!DOCTYPE html>
<html lang="en">
<style>

.item {

    width: 500px;
    height: 60px;
    background-color: blue;
    outline:20px solid red;
    border:1px solid black;
    padding: 10px;
    position: relative;
}

.child {
    width: 100%;
    background-color: yellow;
    height: 100%;

    outline:1px solid yellow;
    position: absolute;
    top: 0;
    left: 0;

}

</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="item">
        <div class="child">

        </div>
    </div>
</body>
</html>
Pedro Coelho
  • 1,411
  • 3
  • 18
  • 31