how can I remove the gap between the lines of flex blocks?
I have a certain number of red blocks, which may vary. When the number of blocks is small, the distance between the lines is large; when there is a large number, there is none. How to remove a gap with a small quantity.
.container {
width: 100%;
display: flex;
border: solid 3px black;
flex-wrap: wrap;
height: 500px;
overflow-y: scroll;
}
.container-red-box {
width: 25%;
}
.red-box {
margin: 2px;
height: 100px;
background: red;
border: solid 3px black;
}
.container-boxs {
width: 100%;
display: flex;
flex-wrap: wrap;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="container-boxs">
<div class="container-red-box">
<div class="red-box"></div>
</div>
<div class="container-red-box">
<div class="red-box"></div>
</div>
<div class="container-red-box">
<div class="red-box"></div>
</div>
<div class="container-red-box">
<div class="red-box"></div>
</div>
<div class="container-red-box">
<div class="red-box"></div>
</div>
<div class="container-red-box">
<div class="red-box"></div>
</div>
<div class="container-red-box">
<div class="red-box"></div>
</div>
<div class="container-red-box">
<div class="red-box"></div>
</div>
</div>
</div>
</body>
</html>
10 blocks:
40 blocks: