我有一个flexbox,可以包含任意数量的项目,我已经将其设置为特定大小.
当我有一堆物品在里面时,这些物品会垂直地挤在一起,这是我想要的行为,但如果只有少数物品,它们会留出空间来均匀地填充垂直空间.我怎样才能让他们总是挤在一起?
.container {
height: 300px;
width: 500px;
display: flex;
flex-direction: row;
border: solid;
flex-wrap: wrap;
overflow-y: auto;
}
.flex-1 {
height: 100px;
width: 100px;
background-color: blue;
border: solid;
}
<p>The blue boxes should be flush against each other vertically</p>
<div class="container">
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
</div>
<br>
<p>When there's a whole bunch it works correctly</p>
<div class="container">
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
<div class="flex-1"></div>
</div>