I am currently working on a project that involves creating a dynamic grid layout with two resizable columns, namely #red-container and #green-container. The goal is to make each column resizable horizontally while also allowing the main container #container to be resized vertically. When resizing the container, the height of the child elements should adjust accordingly. Both #red-container and #green-container consist of cells that are added dynamically in a row-wise manner using a JavaScript function. Here is the code snippet demonstrating my current implementation:
function addCell(color) {
let container = document.getElementById(color + "-container");
let cell = document.createElement("div");
cell.innerText = color;
container.appendChild(cell).className = "container-item";
}#container {
border: 1px solid #ddd;
display: flex;
flex-grow: 1;
flex-direction: row;
height: 50vh;
resize: vertical;
overflow: auto;
}
#red-container,
#green-container {
flex-grow: 1;
display: grid;
grid-auto-flow: row;
margin: 10px;
resize: horizontal;
overflow: auto;
}
#red-container {
border: 1px solid red;
}
#green-container {
border: 1px solid green;
}
.container-item {
padding: 10px;
border: 1px solid black;
}<button onclick="addCell('red')">add red cell</button>
<button onclick="addCell('green')">add green cell</button>
<div id="container">
<div id="red-container"></div>
<div id="green-container"></div>
</div>Despite the current functionality, I have encountered two problems:
- Clicking "add red cell" for the first time increases the width of
#red-container. - Adjusting the widths of the red and green containers is inconsistent, and I am unable to reduce the width of the red container below 50%.
If you have any solutions to these issues or suggestions for optimizing the CSS code (particularly in eliminating duplicates in #red-container and #green-container), your feedback would be greatly appreciated!