解决Flexbox六边形网格在窄屏溢出问题：vh与vw的选择

function renderHexGrid() {
  let hexArray = [
    ['v', 'v', 'v', '_', '_', '_', 'v', 'v', 'v'],
    ['v', '_', '_', '_', '_', '_', '_', '_', 'v'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['v', 'v', '_', '_', '_', '_', '_', 'v', 'v'],
    ['v', 'v', 'v', 'v', '_', 'v', 'v', 'v', 'v']
  ];
  // 将hexWidth和hexHeight的单位概念从vh调整为vw
  const hexWidth = 7; // 对应 7vw
  const hexHeight = 6; // 对应 6vw
  const hexGrid = document.getElementById("hex-grid");

  for (let i = 0; i < hexArray.length; i++) {
    let hexRow = document.createElement("div");
    hexRow.style.display = "flex";
    hexRow.style.justifyContent = "center";
    // 允许flex项目换行，以防单行无法容纳所有六边形
    hexRow.style.flexWrap = "wrap"; 

    for (let j = 0; j < hexArray[i].length; j++) {
      if (hexArray[i][j] != 'v') {
        let hex = document.createElement("div");
        hex.style.display = "flex";
        hex.style.justifyContent = "center";
        hex.style.alignItems = "center";

        if (j % 2 == 0) {
          // 垂直偏移量也应基于vw，以保持与宽度的比例
          hex.style.transform = "translateY(-" + (hexHeight / 2) + "vw)"; 
          hex.style.backgroundColor = "red";
        } else {
          hex.style.backgroundColor = "blue";
        }
        if (i % 2 == 0) {
          hex.style.opacity = 0.5;
        }
        // 关键修改：将高度和宽度单位改为vw
        hex.style.height = hexHeight + "vw"; 
        hex.style.width = hexWidth + "vw";   
        hex.textContent = i + ";" + j;
        hex.style.color = "black";
        // 调整负边距以保持六边形紧密排列，同样使用vw
        hex.style.marginLeft = "-" + (hexWidth / 8) + "vw"; 
        hex.style.marginRight = "-" + (hexWidth / 8) + "vw";
        hex.style.clipPath = "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)";
        hexRow.appendChild(hex);
      }
    }
    hexGrid.appendChild(hexRow);
  }
}
renderHexGrid();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 推荐添加，防止边距和内边距导致意外溢出 */
}

body {
  margin: 5%;
  width: 90%;
  min-height: 90vh;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 确保body本身不会溢出，并可以容纳flex子项 */
  overflow-x: hidden; 
}

#hex-grid {
  /* 可以为网格容器设置最大宽度，防止在超宽屏幕上过大 */
  max-width: 100vw; 
}