How to show dynamically generated content.

I’m trying to show a random number of divs (may be empty, but at least one) inside a parent div.<br>I want them to be visually ordered horizontally, same height (may be different width), and fit the entire height of the parent.<br>I want them to maintain their height when the height of the parent changes.<br>First of all, I don’t know what layout do I have to apply to the items to have the width of each item be independent of the others.<br>Then, I would like to know what is the best way to show dynamically generated content, maybe not divs, but canvas? This is an example of how I do it currently.<br><br>```<br>let div = document.createElement('div');<br>div.style.width = '100%';<br>div.style.height = '100%';<br>// Add more dynamically generated styles.<br>div.className = 'div';<br>// Add more styles to the class.<br>document.getElementById('parent').appendChild(div);<br>```<br><br>Each div is going to have its own styles, canvas, mouse, keyboard events, and other stuff. I don’t know a more efficient way to do that. I don’t even know if this is the right way.<br><br>The items are going to be same height, but different width, visually ordered horizontally, and the parent has an initial height.<br><br>I want them to fit the entire height of the parent, visually ordered horizontally, dynamically generated, and same height.<br><br>I think that the dynamically generated content must also fit the entire height of the parent.<br><br>The dynamically generated content must also be visually ordered horizontally, differently sized, and same height.<br><br>All of the dynamically generated content should fit the entire height of the parent, dynamically sized, and visually ordered horizontally.<br><br>Each div is going to have its own styles, canvas, mouse, keyboard events, and other stuff.