我正在try 创建一个具有两个列的动态网格布局，即#red-container和#green-container.每个容器或列应该是水平可调整大小的并且主容器#container应该是垂直可调整大小的.调整容器大小应调整子元素的高度.#red-container和#green-container具有单元格，这些单元格是以按行方式使用JavaScript函数动态添加到容器中的.我有以下可用的实现:
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 {
flex-grow: 1;
display: grid;
grid-auto-flow: row;
margin: 10px;
resize: horizontal;
overflow: auto;
border: 1px solid red;
}
#green-container {
flex-grow: 1;
display: grid;
grid-auto-flow: row;
margin: 10px;
resize: horizontal;
overflow: auto;
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>然而，它有两个问题:
- 当用户第一次点击
add red cell时，它会增加#red-container的宽度. - 调整红色和绿色容器的宽度不一致，我无法将红色容器的宽度调整到宽度的50%以下.
对如何解决这两个问题有什么 idea 吗？此外，欢迎任何关于以更简洁的方式编写CSS的建议(#red-container和#green-container包含重复的代码).