Css 当宽度为容器的四分之一时，为什么flex child跳到下一行？

我正在尝试创建一个4x4盒子。当子div的宽度为25%时，为什么一行中的第四个div会跳到下一行。它不是应该每4个div跳一次吗

HTML

JS

const container=document.querySelector（“.container”）；
常数calcWidth=100/4；
for（设i=0；i<16；i++）{
const item=document.createElement（“div”）；
item.classList.add（“item”）；
item.style.width=`${calcWidth}%`；
item.style.height=`${calcWidth}%`；
容器。子容器（项目）；
}

---

边框在宽度上增加了一个额外的2px，这样在添加边框/填充时元素的大小就不会改变：

* {
    box-sizing: border-box;
}

const container=document.querySelector（“.container”）；
常数calcWidth=100/4；
for（设i=0；i<16；i++）{
const item=document.createElement（“div”）；
item.classList.add（“item”）；
item.style.width=`${calcWidth}%`；
item.style.height=`${calcWidth}%`；
容器。子容器（项目）；
}

*{
框大小：边框框；
}
.集装箱{
显示器：flex；
宽度：600px；
高度：600px；
柔性包装：包装；
}
.项目{
边框：1px纯黑；
背景颜色：黄色；
}

.container {
  display: flex;
  width: 600px;
  height: 600px;
  flex-wrap: wrap;
}
.item {
  border: 1px solid black;
  background-color: yellow;

}

const container = document.querySelector(".container");
const calcWidth = 100/4;
for (let i = 0; i < 16; i++) {
  const item = document.createElement("div");
  item.classList.add("item");
  item.style.width = `${calcWidth}%`;
  item.style.height = `${calcWidth}%`;
  container.appendChild(item);
}

* {
    box-sizing: border-box;
}