CODEWITHSUNDEEP
htmlcssgoogle-chromesafari
Decade Moon
Decade Moon

Reputation: 34306

The scrollable height is ignoring the bottom margin of the last child of a scrollable div in Safari/Chrome

.scroll {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  overflow: scroll;
  background-color: yellow;
}

.inner {
  height: 100%;
}

.content {
  height: 100%;
  margin: 50px 0;
  background-color: red;
}
<div class="scroll">
  <div class="inner">
    <div class="content">
    </div>
  </div>
</div>

Fiddle

The above snippet consists of a scrollable div of size 200px. Inside that is an element with height 100%, and inside that is another element with height 100% but with top and bottom margin of 50px.

I would expect that the scrollable height of the div would be 50 + 200 + 50 = 300px. Indeed, this is the case in Chrome and Firefox where you can see the top and bottom yellow margin when you scroll the div, but for some reason Safari clips the bottom margin and the scrollable height is only 50 + 200 = 250px.

Who is correct here? Is this a Safari bug? Is there an easy fix for this without changing the overall structure of the page too much?

Upvotes: 2

Views: 804

Answers (1)

Daniel Groner
Daniel Groner

Reputation: 173

Adding overflow: auto; to your div.inner seems to solve the problem in Safari.

.scroll {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  overflow: scroll;
  background-color: yellow;
  
}

.inner {
  height: 100%;
  overflow: auto;
}

.content {
  height: 100%;
  margin: 50px 0;
  background-color: red;
}
<div class="scroll">
  <div class="inner">
    <div class="content">
    </div>
  </div>
</div>

Upvotes: 0

Related Questions