Высота прокрутки игнорирует нижнее поле последнего потомка прокручиваемого div в Safari.

Question

.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

Приведенный выше фрагмент состоит из прокручиваемого элемента div размером 200px. Внутри это элемент с высотой 100%, а внутри это еще один элемент с высотой 100%, но с верхним и нижним полем 50px.

Я ожидаю, что высота прокрутки div будет 50 + 200 + 50 = 300 пикселей Действительно, это имеет место в Chrome и Firefox, где вы можете увидеть верхнее и нижнее желтое поле при прокрутке div, но по какой-то причине Safari обрезает нижнее поле, а высота прокрутки составляет всего 50 + 200 = 250 пикселей .

Кто здесь прав? Это ошибка Safari? Можно ли легко это исправить, не слишком меняя общую структуру страницы?

Answer 1

Добавление overflow: auto; к вашему div.inner, похоже, решает проблему в 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>