请运行代码片段来理解我的问题。
点击方 block 2次后，滚动条可见。但是，部分显示了最左边/最右边的正方形，我不知道如何避免这种情况。
还想强调一下，我:
- 更喜欢将正方形居中对齐。
- 水平和垂直插入将被实现。
此 GIF 演示了最终期望的结果/示例输出:
function insertElement(ev) {
let this_node = ev.target;
this_node.insertAdjacentHTML('afterend', '<div class="square" onclick="insertElement(event);"></div>');
}.container {
display: -webkit-flex;
justify-content: center;
width: 100px;
padding: 20px;
background-color: #fff280;
overflow: scroll;
}
.square {
min-width: 45px;
height: 45px;
margin: 5px;
background-color: #9c9c9c;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="square" onclick="insertElement(event);"></div>
</div>
</body>
</html>最佳答案
如果你想保持样式居中不溢出，溢出后左对齐，需要2个容器，里面的容器适应内容的宽度(不是父级)，例如使用 display: inline-flex，像这样:
function insertElement(ev) {
let this_node = ev.target;
this_node.insertAdjacentHTML('afterend', '<div class="square" onclick="insertElement(event);"></div>');
}.scrollContainer {
width: 150px;
height: 150px;
overflow: scroll;
}
.centerContainer {
display: inline-flex;
overflow: visible;
min-width: 100%;
min-height: 100%;
justify-content: center;
align-items: center;
background-color: #fff280;
}
.square {
min-width: 45px;
height: 45px;
margin: 5px;
background-color: #9c9c9c;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="scrollContainer">
<div class="centerContainer">
<div class="square" onclick="insertElement(event);"></div>
</div>
</div>
</body>
</html>关于javascript - insertAdjacentHTML 后，即使启用滚动，部分元素也会显示，如何避免覆盖？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57123394/