Javascript 在insertAdjacentHTML之后，即使启用了滚动，也会部分显示某些元素，如何避免覆盖？

请运行代码片段以理解我的问题

单击正方形2次后，滚动条可见。然而，最左边/最右边的正方形部分显示，我不知道如何避免这种情况

我还要强调，我：

首选居中对齐正方形

水平和垂直插入都要执行

最终的预期结果/样本输出如下所示：

函数插入元素（ev）{
让此_节点=ev.target；
该节点为插入式相邻TML（'afterend'，''）；
}

.container{
显示：-webkit flex；
证明内容：中心；
宽度：100px；
填充：20px；
背景色：#fff280；
溢出：滚动；
}
.广场{
最小宽度：45px；
高度：45px；
保证金：5px；
背景色：#9c9c9c；
}

---

您需要使用

flex-wrap:wrap

来确保方框分成多行

函数插入元素（ev）{
让此_节点=ev.target；
该节点为插入式相邻TML（'afterend'，''）；
}

.container{
显示：-webkit flex；
柔性包装：包装；
证明内容：中心；
宽度：100px；
填充：20px；
背景色：#fff280；
溢出：滚动；
}
.广场{
最小宽度：45px；
高度：45px；
保证金：5px；
背景色：#9c9c9c；
}

---

如果您想保持居中样式而不溢出，并在溢出后保持左对齐，则需要两个容器，其中一个容器根据内容的宽度（而不是父容器）进行调整，例如使用

显示：inline flex

，如下所示：

函数插入元素（ev）{
让此_节点=ev.target；
该节点为插入式相邻TML（'afterend'，''）；
}

.scrollContainer{
宽度：150px；
高度：150像素；
溢出：滚动；
}
.centerContainer{
显示：内联flex；
溢出：可见；
最小宽度：100%；
最小高度：100%；
证明内容：中心；
对齐项目：居中；
背景色：#fff280；
}
.广场{
最小宽度：45px；
高度：45px；
保证金：5px；
背景色：#9c9c9c；
}

这是因为

justify content:center。。。不过，期望的结果是什么？只需将
justify content
更改为
flex start
就可以显示一些示例输出吗？@Aprillion我想模拟类似Excel的单元格追加行为。名为TreeSheets的应用程序具有此功能，但它不是基于web的。结果/示例输出在此GIF中演示感谢您的快速回答，我没有提前提到约束是我的错…需要滚动，但不需要包装。下面是GIF演示的最终期望结果：感谢您提供的解决方案，我将尝试应用它，然后接受答案