Flexbox容器元素排序问题：Item 5溢出无法填充空白

当前问题根源在于Item 5设置的350px固定高度超出了容器剩余可用空间：容器总高度500px，第一行（Item1、Item2、Item3）占据200px高度后，剩余可用高度仅为300px。同时Item 5的宽度设置符合剩余空间，但高度溢出导致布局异常。要让Item 5填满Item2和Item3下方的剩余区域，只需调整以下样式：

修改后的完整CSS代码 #

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  width: 500px;
  height: 500px;
  border: 6px solid black;
  flex-wrap: wrap;
  align-content: flex-start; /* 确保行高由内容决定，避免自动拉伸 */
}

.flex-item {
  color: wheat;
  font-size: 1.5rem;
  text-align: center;
}

.item-1 {
  background-color: rgb(0, 174, 255);
  height: 200px;
  width: 200px;
}

.item-2 {
  background-color: rebeccapurple;
  height: 150px;
  width: 150px;
}

.item-3 {
  background-color: red;
  height: 150px;
  width: 150px;
}

.item-4 {
  background-color: rgb(155, 0, 96);
  height: calc(100% - 200px); /* 占满第一行下方的剩余高度 */
  width: 200px;
}

.item-5 {
  background-color: gray;
  height: calc(100% - 200px); /* 匹配剩余高度，避免溢出 */
  width: 300px; /* 对应Item2+Item3的总宽度，填充目标区域 */
}

关键调整说明 #

• 容器添加align-content: flex-start：阻止Flexbox自动拉伸行高，确保第一行高度由Item1的200px决定，剩余空间完整留给第二行元素。
• 替换Item4和Item5的固定高度为calc(100% - 200px)：通过计算容器总高度减去第一行高度，让两个元素刚好填满剩余的300px高度，不会超出容器边界。
• 保留Item5的300px宽度：正好匹配Item2和Item3的总宽度（150px+150px），完美填充目标区域。

调整后所有元素都会被限制在500x500的容器内，Item5将准确占据Item2和Item3下方的剩余空间。

内容的提问来源于stack exchange，提问作者VISHWANATH T S