I'm working on a layout where a section of the page should be scrollable. However, while the scrollbar appears as expected, some content gets cut off inside the scrollable container instead of being fully visible.
The .login-item-form-container has overflow-y-auto, and a scrollbar appears as expected when there is more content than fits within the container. However, the text gets cut off at the top of the container instead of being fully scrollable.
I saw on another Stack Overflow post that the problem here is caused by the fact that when using justify-content to center a flex item, it will, by design, overflow at its top/bottom (or left/right).The new keyword "safe" solves the problem. Though only recent browsers versions support it yet, so I need help to find other workaround for older browser versions.
*,*::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;}<html><body><div class="login-container h-100"><div class="login-item-carousel h-100"><h1>Test</h1></div><div class="login-item-form h-100"><div class="login-item-form-container w-100 h-100 overflow-y-auto"><p>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</p><p>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</p><p>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.</p><a target="_blank" href="">www.test.test</a></div></div></div></body></html>