JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #mainDiv {
      max-height: 150px;
      
      border: 2px solid red;
      padding: 10px;
    }

    .subDiv {
      width: 200px;
      margin-bottom: 5px;
    }

    .innerDiv {
      height: 190px;
      overflow-y: auto;
      background-color: blue;
      padding: 5px;
    }
  </style>
  <title>Dynamically Generated Divs</title>
</head>
<body>

<div id="mainDiv"></div>

<script>
  // Function to generate subDivs dynamically
  function generateSubDivs() {
    for (let i = 1; i <= 1; i++) {
      const subDiv = document.createElement('div');
      subDiv.className = 'subDiv';

      const innerDiv = document.createElement('div');
      innerDiv.className = 'innerDiv';
      innerDiv.innerText = `This is a long text for SubDiv ${i}. `.repeat(10); // Add a long text to demonstrate scrolling

      subDiv.appendChild(innerDiv);
      document.getElementById('mainDiv').appendChild(subDiv);
    }
  }

  // Call the function to generate subDivs
  generateSubDivs();
</script>

</body>
</html>