Why does this div get taller when the border is removed?

Question

I have a div.content of variable height that's inside a scrollable fixed-height div.content-wrapper.

I want div.content to be at least 1px taller than div.content-wrapper, so that rubberband scrolling works on iOS.

This works well: https://jsbin.com/tonotenamo/edit?html,css,output

However, once I remove the border from div.content, it grows to be much taller than 1px taller than div.content-wrapper.

Any ideas how to fix this?

PS: This does not happen, when I remove p { margin: 50px 0 }.

div, p {
  margin: 0;
  padding: 0;
}

div.content-wrapper {
  height: 300px;
  overflow-y: scroll;
  background: rgb(255, 0, 0, .1);
}

div.content {
  min-height: calc(100% + 1px);
  border: 1px solid blue; // Remove this and div.content becomes too tall
}

p {
  margin: 50px 0
}

HTML:

<div class="content-wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quod, perspiciatis similique esse consectetur voluptate veniam modi dolor deleniti amet. Sequi rerum harum ad molestias itaque culpa, dolores consequatur dignissimos.</p>
  </div>
</div>

There's quite a bit of [discussion on this](https://www.google.com/search?q=adding+border+changes+box+size+site:stackoverflow.com&rlz=1C1ZCEB_enUS850US850&sxsrf=ALeKk00bxNHs2R0PuYHSzCvKFm71v7Khiw:1584966517213&sa=X&ved=2ahUKEwjI2PSxzLDoAhWCVc0KHVOhDYAQrQIoBDALegQIAxAO&biw=1618&bih=947) to be found. It's a matter of either box model or user-agent padding and margins. Adding `overflow: hidden` to your content div fixes it, but a better overall approach might be to set the entire document's box model to `border-box`. — isherwood, Mar 23 '20 at 12:33

score 0 · Answer 1 · answered Mar 23 '20 at 12:51

Here you go with a solution

div, p {
  margin: 0;
  padding: 0;
}

div.content-wrapper {
  height: 300px;
  overflow-y: scroll;
  background: rgb(255, 0, 0, .1);
}

div.content {
  min-height: 100%;
  border: 1px solid blue;
  box-sizing: border-box;
}

p {
  margin: 50px 0
}

HTML:

<div class="content-wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quod, perspiciatis similique esse consectetur voluptate veniam modi dolor deleniti amet. Sequi rerum harum ad molestias itaque culpa, dolores consequatur dignissimos.</p>
  </div>
</div>

Apply css box-sizing: border-box; to div.content

This does not work unfortunately: https://jsbin.com/lexiqahore/edit?html,css,output (EDIT: because it must work without the border on the div.content) — Tonald Drump, Mar 31 '20 at 13:53

score 0 · Answer 2 · answered Mar 23 '20 at 12:52

0

Like mentioned in the comment there are a lot of possible solutions here like:

Use padding on p instead of margin:

p {
  padding: 50px 0;
}

Add overflow: hidden; to your div.content

answered Mar 23 '20 at 12:52

lukaszmtw

400
2
9

Why does this div get taller when the border is removed?

2 Answers2