Что вызывает разницу в размерах дочерних элементов между flexbox и блоком по умолчанию? [дубликат] ⇐ CSS

[Anonymous]

Я заметил разницу в поведении между типом отображения по умолчанию и флексбоксом и не понимаю, в чем причина. Вот минимальный пример кода, который я придумал:

Код: Выделить всё

body {
margin: 0;
width: 100vw;
height: 100vh;
}

video {
width: 100%;
height: 100%;
}

Код: Выделить всё

В этом примере видео кажется немного выше экрана – вертикальная полоса прокрутки видна, и ее можно прокручивать на небольшое расстояние.
Добавление display: flex в тело меняет это. Теперь видео идеально заполняет экран и нет полос прокрутки.
Итак. Почему это происходит?

• Почему flexbox заставляет полосы прокрутки исчезать
• Почему вообще существуют полосы прокрутки ?

Еще несколько подробностей, в порядке убывания вероятной важности:
Я думал, что такое поведение связано с размером окна, но, вероятно, это не так: замена видео на div с рамкой также приводит к появлению полос прокрутки (как и ожидалось), но затем flexbox не заставляет их исчезать. Кроме того, добавление box-sizing: border-box к видео не приводит к исчезновению полос прокрутки.
При просмотре в отладчике реальной разницы в размерах не наблюдается. в любых элементах между случаями flexbox и no-flexbox. Вроде чисто визуально (по крайней мере в Firefox)

Код: Выделить всё

flex-direction

не имеет значения — и строка, и столбец приводят к исчезновению полос прокрутки.
Насколько я могу судить, такое поведение не характерно для видео. На самом деле я впервые столкнулся с этим в каком-то другом случае. Однако я не смог воспроизвести это простым способом, поэтому это видео. Элементы управления видео не обязательны для воспроизведения поведения, но они облегчают просмотр.
Проверено в Firefox и Chrome – воспроизводится в обоих.

Подробнее здесь: https://stackoverflow.com/questions/786 ... ault-block