如何让嵌套Flexbox填充指定空间？Etch-A-Sketch动态高度问题

我正在完成OdinProject前端入门课程的Etch-A-Sketch作业，遇到嵌套Flexbox布局问题：当前CSS仅在设置固定像素高度时能正常填充空间，若将高度设为auto，容器宽度保持960px正常，但行和单元格高度会变为0px。目前固定高度适用于16×16画布，但我计划让用户自定义单元格数量，需要实现动态高度，尝试多种方法均未解决。

初始代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <div id="container">

    </div>
<script src = "app.js"></script>
</body>
</html>

CSS #

#container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: stretch;
    height: 960px;
    width: 960px;
}
div[tag]{
    display: flex;
    flex-direction: row;
    height: 60px;
    width: 100%;
    flex-grow: 1;
}
[tag] > [id]{
    display: flex;
    height: 60px;
    flex-direction: row;
    flex-grow: 1;
}

div[selected]{
    background-color: black;
}

JS #

var tag = document.createElement("div");

var element = document.getElementById("container");


for(let i = 1; i<17; i++){
    
    var tag = document.createElement("div");
    tag.setAttribute('id', `row`)
    tag.setAttribute('tag', `parent`)
    element.appendChild(tag);
    var elements = document.getElementById(`row`)
    for(let j = 1; j<17; j++){
        var tags = document.createElement("div");
        tags.setAttribute('id', `${j}`)
        tags.setAttribute('cell', `yes`)
        tags.setAttribute('parent', `${i}`)
        elements.appendChild(tags)
        elements.removeAttribute("id")
        //console.log(elements)
        
     }
}
var cells = document.querySelectorAll('parent')
    addEventListener('mouseover', function(e) {
    const selectedCell = e.path[0]
    //console.log(selectedCell.getAttribute('parent'))
    //console.log(typeof selectedCell.getAttribute('parent'))
    if(typeof selectedCell.getAttribute('parent') === 'string'){
        selectedCell.setAttribute('selected', 'true')
        //console.log(selectedCell)
    }
    
})

当前问题代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <div id="container">

    </div>
<script src = "app.js"></script>
</body>
</html>

CSS #

div#container {
    border-color: red;
    height: 960px;
    width: 960px;
    flex-direction: row;
}
div[tag*="parent"]{
    display: flex;
    flex-direction: row;
    height: auto;
    width: 100%;
    flex-grow: 1;
}
div[cell*="yes"]{
    display: flex;
    height: auto;
    flex-direction: row;
    flex-grow: 1;
    
}

div[selected]{
    background-color: black;
}

JS #

var tag = document.createElement("div");

var element = document.getElementById("container");


for(let i = 1; i<17; i++){
    
    var tag = document.createElement("div");
    tag.setAttribute('id', `row`)
    tag.setAttribute('tag', `parent`)
    element.appendChild(tag);
    var elements = document.getElementById(`row`)
    for(let j = 1; j<17; j++){
        var tags = document.createElement("div");
        tags.setAttribute('id', `${j}`)
        tags.setAttribute('cell', `yes`)
        tags.setAttribute('parent', `${i}`)
        elements.appendChild(tags)
        elements.removeAttribute("id")
        console.log(elements)
        
     }
}
var cells = document.querySelectorAll('parent')
    addEventListener('mouseover', function(e) {
    const selectedCell = e.path[0]
    //console.log(selectedCell.getAttribute('parent'))
    console.log(typeof selectedCell.getAttribute('parent'))
    if(typeof selectedCell.getAttribute('parent') === 'string'){
        selectedCell.setAttribute('selected', 'true')
        console.log(selectedCell)
    }
    
})

解决方案 #

问题核心在于：当把行和单元格的高度设为auto时，Flex容器的子元素没有明确的高度参考，导致内容为空时高度塌陷为0。结合自定义单元格数量的需求，可按以下方式修改：

• 修复容器的Flex属性
  容器#container需设置为垂直方向的Flex布局，补上缺失的display:flex：

  div#container {
      border-color: red;
      height: 960px;
      width: 960px;
      display: flex; /* 补上之前缺失的display:flex */
      flex-direction: column; /* 改为垂直排列行 */
  }
  

• 让行和单元格自动填充高度
  行元素通过flex-grow:1均匀分配容器高度，单元格同样用flex-grow:1分配行的空间，去掉多余的height:auto：

  div[tag*="parent"]{
      display: flex;
      flex-direction: row;
      width: 100%;
      flex-grow: 1; /* 让每一行均匀分配容器的高度 */
  }
  div[cell*="yes"]{
      flex-grow: 1; /* 让每个单元格均匀分配行的宽度和高度 */
  }
  

• 优化JS逻辑（可选）
  避免重复ID和冗余DOM查询，改用事件委托提升性能：

  var element = document.getElementById("container");
  
  for(let i = 1; i < 17; i++){
      var row = document.createElement("div");
      row.setAttribute('tag', `parent`)
      element.appendChild(row);
      for(let j = 1; j < 17; j++){
          var cell = document.createElement("div");
          cell.setAttribute('cell', `yes`)
          cell.setAttribute('parent', `${i}`)
          row.appendChild(cell);
      }
  }
  
  element.addEventListener('mouseover', function(e) {
      const selectedCell = e.target;
      if(selectedCell.hasAttribute('parent')){
          selectedCell.setAttribute('selected', 'true');
      }
  })
  

修改后，无论设置多少行多少列，行和单元格都会自动均匀分配容器的960×960空间，无需固定像素高度，完美支持自定义单元格数量的需求。

内容的提问来源于stack exchange，提问作者Snowbird2001