I am using the following code
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
.child {
height: 200vh;
width: 100vw;
background: yellow;
}
.parent {
display: flex;
flex-flow: column;
height: 100%;
background: green;
overflow: scroll;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>This outputs a yellow screen because the child overlaps the parent, but no scroll bar is shown for the scroll parent. If I remove the display:flex scrolling happens. It also happens when I fill the child with text until it overflows. I would like the child to always make the parent overflow, even without text. Is this possible?
I need to do this because I use a script that adds an empty div at the end of the child in the parent to make the parent scroll until some elements is back in view.
