The content in the div columns is extending out of the page, especially when there are a lot of items. Instead of expanding downward as expected, it expands upward.
Code Snippet:
var timesClicked = 0;
document.getElementById('add').addEventListener("click", () => {
// code goes here
})
document.getElementById('previous').addEventListener("click", () => {
// code goes here
})
for (let i = 1; i <= 12; i++) {
document.getElementById(`input${i}`).addEventListener("input", () => {
document.getElementById(`div${i}`).innerHTML = document.getElementById(`input${i}`).value
})
}// CSS code goes here<form action="registerNewUser.php" method="post" accept="utf-8" id="form" onsubmit="return confirm('Are you sure you want to add this profession')">
// form HTML code goes here
</form>I have been trying to troubleshoot for several hours but haven't been able to identify the specific issue in the CSS causing the problem. Seeking assistance to resolve this issue.