0

When the container is not set to width:100%, the box-sizing:border-box is not working. Example:

header {
  padding: 50px;
  background-color: purple;
  box-sizing: border-box;
  height: 50px;
}

main {
  padding: 10px;
  background-color: blue;
  width: 50px;
  height: 60px;
}
<main>
  <header>header</header>
</main>

In this example, the "header" exceeds its container "main" when i increase the padding. Why is the border-box not working here? I thought it was supposed to count the padding and borders with the width of the element. Why is it exceeding the container then?

Another case is when i set the width to 100%, and then set the padding to over 700px, then it starts to exceeds the same way.

html {
  padding: 10px;
  background-color: orange;
}

body {
  background-color: yellow;
  padding: 10px;
}

header {
  padding: 800px;
  background-color: purple;
  box-sizing: border-box;
  height: 50px;
  width: 100%;
}

main {
  padding: 10px;
  background-color: blue;
}
<body>

  <main>
    <header>header</header>
  </main>

</body>

Up until padding:700px, the "header" was container within the width of the container. Once the padding is increased above 700px, it starts to exceed the width of the container.

So, first of all, why? Why is it working up until 700px, and why is it not working for the height? and why is it not working at all when the width is set to a number lower than 100%?

Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39
  • box-sizing is only relevant when (1) you explicitely define width/height (2) the padding is small enough to be included in the total width – Temani Afif Jul 22 '20 at 00:14
  • But i have defined a width and height on the"main" container. Look at my code. Also, what is the "total width"? I thought the way the box-sizing works is that it includes the padding as part of the width. That's how it works when the width of the container is 100%, but when its less than 100%, it's not working at all, and if it's 100%, but the padding exceeds 700px, it stops working again. Why!? –  Jul 22 '20 at 09:35
  • You are missunderstanding the purpose of box-sizing. Read the duplicate fully to understand how it works. – Temani Afif Jul 22 '20 at 09:37
  • With a padding of 800px without content, your min-size is 1600px. On my screen with 1900px resolution, no problem at all. *box-sizing* will work if you make *padding: 800px; max-size: 100%" – iguypouf Jul 22 '20 at 13:47
  • I've solved my own problem. I tested all kinds of cases with the padding and box-sizing until i finally got it. My issue was not having a good understanding of how padding works, and what does box-sizing actually do. I wish i could answer my own question here so people who have the same problem can see it, but i am not given the option to answer the question. –  Jul 22 '20 at 14:31
  • Essentially the issue was this. Padding adds space inside the element. When there is a fixed width, adding padding adds space to the width of the element thus making the element expand outward as new space is added. Adding border-box to the element means that the extra padding space is counted as part of the width, i.e. it's not extra space added to the width, but it's sort of inside the width. So, adding padding to a fixed width does not make the element expand outward .. until the padding space becomes larger than the width space, then the border-box does not work, and the element starts to –  Jul 22 '20 at 14:37
  • expand outward. When the width is 100%, that's about 1500px worth of padding space. Beyond 1500px, the padding space exceeds the width space, and therefore the border-box does not contain it inside anymore, so the element starts to expands as the padding space increase. Another way to easily test this is if you make the padding-right 100%, and then just adding 1 more percent, and the element will start expanding outward. Same goes for height too. –  Jul 22 '20 at 14:40

0 Answers0