Нижняя граница не видна на элементе 100vh ⇐ Html

[Anonymous]

Я пытаюсь создать элемент во всю высоту с видимой границей. Я установил высоту элемента-обертки на 100vh и добавил к нему рамку. Верхняя, левая и правая границы отображаются правильно, но нижняя граница не видна в области просмотра.
Почему нижняя граница скрыта, хотя я использую размер окна: border-box и высоту: 100vh? Как обеспечить полную видимость нижней границы?
Я пробовал изменить высоту на Calc(100vh - 2px), но считаю, что должно быть более чистое решение.
Вот мой код:

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

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.main-content {
height: 100vh;
background-color: #000000;
}

.wrapper {
height: 100%;
border: 1px solid red;
}

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

Title

Подробнее здесь: https://stackoverflow.com/questions/798 ... vh-element