Почему переполнение: скрыто добавляет дополнительную высоту в элемент встроенного блока?

HTML

<body>
  <div>
    <div>foo bar</div>
  </div>
</body>

CSS

body, html, div {
  height: 100%;
  margin: 0;
}
div div {
  display: inline-block;
  overflow: hidden;
}

Почему overflow: hidden вызывает вертикальную полосу прокрутки? Кроме того, почему эта высота не связана ни с чем на странице? Это как невидимый запас.

100% высота всех элементов является преднамеренной. Теоретически это должно привести к тому, что внутренний div будет расширяться, чтобы соответствовать окну просмотра. И это так!... пока overflow: hidden не существует, почему?

Ответ 1

Дополнительная высота равна высоте разницы между vertical-align: baseline и vertical-align: bottom. "Линия спуска". То, откуда появляются кажущиеся случайными "5 дополнительных пикселей". Если размер шрифта в 10 раз больше, этот разрыв также будет в 10 раз больше.

Кроме того, кажется, что, когда overflow: hidden не существует, элемент inline-block имеет базовую линию как ту же базовую линию своей последней строки текста.

Это заставляет меня думать, что overflow: hidden заставляет базовую линию всего элемента inline-block находиться в нижней части элемента. Несмотря на то, что там нет текста, родительский элемент inline-block резервирует пространство для строки descender. В примере, приведенном в вопросе, его нелегко увидеть, поскольку родительский элемент inline-block имеет height: 100%. Таким образом, вместо этого лишнее пространство, зарезервированное для линии descender, переполняется из этого родительского div.

Почему это пространство все еще там, хотя там нет текста? Я думаю, что, поскольку inline-block создает контекст форматирования, который вызывает это пространство. Если бы этот элемент был block, он создавал бы этот контекст форматирования только после того, как он встретит встроенный элемент или текст.

Это просто теория, но, похоже, это объясняет. Это также объясняет, почему работает @Jonny Synthetic answer: добавление переполнения: скрытое для родителя скрывает дополнительную строку descender.

Благодаря @Hashem Qolami для jsbins, которые дали мне эту теорию.

Ответ 2

Добавление overflow: hidden в родительский div не было для меня вариантом, а также из-за моей структуры HTML он не работал.

Однако, я заметил благодарность @Tony Gustafsson в OP, что это исправляет проблему:

div div {
    vertical-align: bottom;
}

Ответ 3

Элементы с высотой 100% должны иметь переполнение: скрытый. Первое правило css нацелено только на внешний div, скрытое переполнение применяется к внутреннему div.

Jsfiddle с этим CSS, и он отлично работал:

body, html, div {
    height: 100%;
    margin: 0px;
    padding:0px;
    overflow: hidden;
}
div div {
    display: inline-block;
    overflow: hidden;
}