求助：div容器内容无法铺满全宽的原因及解决方案

问题原因分析 #

你的代码存在两个核心问题导致右侧容器无法铺满：

1. .fifty-fifty-content 设置了 width: 50% 和 padding: 20px，但默认的 box-sizing: content-box 会让 padding 计算在宽度之外，两个容器总宽度超过父容器的100%，导致右侧容器被挤压。
2. .fifty-fifty-content 是 flex 容器，但内部的 <form> 元素未设置宽度，无法占满容器可用空间，视觉上表现为表单字段未铺满。

修复方案 #

1. 统一盒模型计算规则 #

给所有元素添加 box-sizing: border-box，确保 padding 和 border 都包含在宽度计算内，避免容器溢出：

* {
  box-sizing: border-box;
}

2. 调整表单容器的flex行为 #

修改 .fifty-fifty-content 样式，让内部表单自动占满容器：

.fifty-fifty-content {
  text-align: left;
  display: flex;
  padding: 20px;
  width: 50%;
  background-color: gray;
  /* 让内部表单拉伸占满容器 */
  align-items: stretch;
}

/* 让表单占满父容器宽度 */
.fifty-fifty-content form {
  width: 100%;
}

3. 可选：更灵活的平分布局 #

如果需要自适应的平分效果，可将 .fifty-fifty-content 的 width:50% 替换为 flex:1，让两个容器自动平分父容器空间：

.fifty-fifty-content {
  text-align: left;
  display: flex;
  padding: 20px;
  flex: 1; /* 替换width:50% */
  background-color: gray;
  align-items: stretch;
}

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
}

.main-content {
  height: auto;
  margin: 0;
  background-color: #fff;
  border-top: 5px solid #666; 
}

.full-content {
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  padding: 10px;
}

.full-content-flex {
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  display: flex;
}

.sixtyfourtycontentleft {
  padding: 20px;
  text-align: left;
  width: 700px;
  border-right: 1px solid #E5E5E5;
}

.fifty-fifty-content {
  text-align: left;
  display: flex;
  padding: 20px;
  flex: 1;
  background-color: gray;
  align-items: stretch;
}

.fifty-fifty-content form {
  width: 100%;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="time"] {
  border-radius: 5px;
  display: block;
  height: 30px;
  width: 100%;
  margin-bottom: 10px;
  font-size: 18px;
  padding: 10px;
  border: 1px solid #CCC;
}

修改后，两个表单容器会平分父容器宽度，表单字段也会铺满各自容器，右侧不会再出现留白。

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