I have noticed that in my code, when I add a lot of elements, some of the content overflows off the screen. It's acceptable if the content goes off the bottom of the screen as it is still accessible. However, I want to prevent it from going off the top of the screen to ensure all elements can be accessed.
Is there a way to achieve this using only CSS and without relying on JavaScript?
Before:
https://i.sstatic.net/Aymix.png
After:
https://i.sstatic.net/u744k.png
function add() {
items = document.getElementById("items");
input = document.getElementById("input").value;
x = document.createElement("p");
x.innerHTML = input;
items.appendChild(x);
}html,
body {
margin: 0;
height: 100%;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}<body class="centered" id="items">
<h1>TODO:</h1>
<input type="text" placeholder="Enter Items Here" id="input" />
<input type="button" onclick="add();" value="add" />
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
</body>