Появляется полоса прокрутки, но контент обрезается в макете Flexbox [дубликат] ⇐ CSS

[Anonymous]

Я работаю над макетом, в котором часть страницы должна быть прокручиваемой. Однако, хотя полоса прокрутки выглядит так, как ожидалось, часть содержимого внутри прокручиваемого контейнера обрезается, а не отображается полностью.
Контейнер .login-item-form-container имеет параметр overflow-y-auto. , и полоса прокрутки отображается, как и ожидалось, когда содержимого больше, чем помещается в контейнере. Однако текст обрезается в верхней части контейнера вместо того, чтобы быть полностью прокручиваемым.
Я видел в другом сообщении Stack Overflow, что проблема здесь вызвана тем фактом, что при использовании justify -content, чтобы центрировать гибкий элемент, он по замыслу будет переполняться сверху/снизу (или слева/справа).
Новое ключевое слово "safe" решает проблему. Хотя пока его поддерживают только последние версии браузеров, поэтому мне нужна помощь в поиске обходного пути для старых версий браузера.

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

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

html {
height: 200px;
}

body {
margin: 0;
height: 100%;
}

.h-100 {
height: 100%;
}

.w-100 {
width: 100%;
}

.overflow-y-auto {
overflow-y: auto;
}

.login-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.login-item-carousel {
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
flex: 3;
}

.login-item-form {
display: flex;
flex-direction: column;
align-items: center;
flex: 2;
max-width: 57rem;
}

.login-item-form-container {
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

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

Test


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus elit et lacus commodo maximus. Proin luctus imperdiet nisi quis fermentum. Proin magna libero, laoreet eget commodo eget, hendrerit ut tellus. Nam at quam pellentesque, sagittis nunc vitae, sollicitudin tortor. Etiam gravida condimentum leo sed lobortisLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus elit et lacus commodo maximus. Proin luctus imperdiet nisi quis fermentum. Proin magna libero, laoreet eget commodo eget, hendrerit ut tellus. Nam at quam pellentesque, sagittis nunc vitae, sollicitudin tortor. Etiam gravida condimentum leo sed lobortisLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus elit et lacus commodo maximus. Proin luctus imperdiet nisi quis fermentum. Proin magna libero, laoreet eget commodo eget, hendrerit ut tellus. Nam at quam pellentesque, sagittis nunc vitae, sollicitudin tortor. Etiam gravida condimentum leo sed lobortis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus elit et lacus commodo maximus. Proin luctus imperdiet nisi quis fermentum. Proin magna libero, laoreet eget commodo eget, hendrerit ut tellus. Nam at quam pellentesque, sagittis nunc vitae, sollicitudin tortor. Etiam gravida condimentum leo sed lobortisLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus elit et lacus commodo maximus. Proin luctus imperdiet nisi quis fermentum. Proin magna libero, laoreet eget commodo eget, hendrerit ut tellus. Nam at quam pellentesque, sagittis nunc vitae, sollicitudin tortor. Etiam gravida condimentum leo sed lobortisLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus elit et lacus commodo maximus. Proin luctus imperdiet nisi quis fermentum. Proin magna libero, laoreet eget commodo eget, hendrerit ut tellus. Nam at quam pellentesque, sagittis nunc vitae, sollicitudin tortor. Etiam gravida condimentum leo sed lobortis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus elit et lacus commodo maximus. Proin luctus imperdiet nisi quis fermentum. Proin magna libero, laoreet eget commodo eget, hendrerit ut tellus. Nam at quam pellentesque, sagittis nunc vitae, sollicitudin tortor.  Etiam gravida condimentum leo sed lobortis.
www.test.test

Подробнее здесь: https://stackoverflow.com/questions/793 ... box-layout