如何实现带复选框的表单在div容器内不发生横向溢出

在div元素内部放置form表单元素，动态追加与列表项一一对应的复选框。复选框数量过多时容器会出现横向滚动条，需要左右滑动才能查看全部元素，需求为复选框不会从挂载的div容器中溢出。

原有实现代码 #

复选框创建JS逻辑 #

function add_qcm(form_comp){
  console.log("add_qcm lancée")
  const messagesContainer = document.getElementById("chatbox"); //on récupère la fenêtre où les messages doivent apparaitre
  let qcmDiv = document.createElement("div");
  let qcmForm = document.createElement("form")
  let list_comp = form_comp;
  for (let i = 0; i<list_comp.length;i++) {
    var comp = list_comp[i];
    console.log(comp);
    let checkbox = document.createElement("input")
    let leg = document.createElement("label")
    checkbox.type="checkbox";
    checkbox.id= `comp_${i}`;
    checkbox.className = "comp";
    checkbox.value = comp;
    leg.id = "leg_comp";
    leg.htmlFor = `comp_${i}`;
    leg.innerText = comp;
    qcmForm.appendChild(checkbox);
    qcmForm.appendChild(leg);
  }
  qcmDiv.id = "qcm_div";
  qcmDiv.className = "qcm_div";
  qcmForm.id="qcm_form";
  qcmForm.className="qcm_form";
  messagesContainer.appendChild(qcmDiv);
  qcmDiv.appendChild(qcmForm);
  

}

配套CSS样式 #

#qcm_div {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  overflow:auto;
  flex-basis: auto;
  word-break: normal;
  
}
#qcm_form {
  
}
#leg_comp {
  font-size: medium;
  font-weight: bold;
  text-align: center;
  display: block;
}

• 外层#qcm_div设置display: flex后未配置换行规则，flex容器默认子元素单行排列，宽度超出容器时就会触发横向滚动
• 作为flex子项的#qcm_form未设置宽度约束，默认会撑开自身宽度适配所有单行排列的复选框
• 所有label重复使用相同idleg_comp，不符合DOM规范，会导致样式匹配、元素选择异常
• label设置display: block但父容器无换行配置，块级元素在不换行的flex容器中无法自动折行

调整后的CSS代码 #

核心是给表单容器设置flex换行规则，约束容器宽度，禁止横向溢出，同时将id选择器改为类选择器适配多个label：

#qcm_div {
  padding: 10px 0;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#qcm_form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.qcm_label {
  font-size: medium;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: pointer;
}

同步调整JS代码 #

修复重复id问题，调整DOM挂载顺序减少页面重绘：

function add_qcm(form_comp){
  console.log("add_qcm lancée")
  const messagesContainer = document.getElementById("chatbox");
  let qcmDiv = document.createElement("div");
  let qcmForm = document.createElement("form")
  let list_comp = form_comp;
  for (let i = 0; i<list_comp.length;i++) {
    const comp = list_comp[i];
    let checkbox = document.createElement("input")
    let leg = document.createElement("label")
    checkbox.type="checkbox";
    checkbox.id= `comp_${i}`;
    checkbox.className = "comp";
    checkbox.value = comp;
    leg.className = "qcm_label";
    leg.htmlFor = `comp_${i}`;
    leg.innerText = comp;
    qcmForm.appendChild(checkbox);
    qcmForm.appendChild(leg);
  }
  qcmDiv.id = "qcm_div";
  qcmDiv.className = "qcm_div";
  qcmForm.id="qcm_form";
  qcmForm.className="qcm_form";
  qcmDiv.appendChild(qcmForm);
  messagesContainer.appendChild(qcmDiv);
}

• 复选框与对应文字组成的选项会在容器宽度不足时自动折行，不会出现横向溢出
• 无需左右滑动即可查看全部选项
• 修复了重复id的规范问题
• 选项间距、复选框与文字的间距可通过修改gap属性按需调整

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