FlexBox Squeeze Elements Together

Question

I have a flexbox that can contain an arbitrary number of items and I've set it to be a specific size.

When I have a bunch of items in there the items get squeezed together vertically which is the behavior I want, but if there's only a few they space out to evenly fill the vertical space. How can I make it so that they always squeeze together?

.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>

JSFiddle

`flex-direction: row;` is the default so no need to write it explicitly — vsync, May 12 '22 at 07:44

score 2 · Answer 1 · answered May 11 '22 at 21:51

2

try adding align-content: start; to your container class.

answered May 11 '22 at 21:51

Mohamed Ghulam

457
3
7

score 1 · Accepted Answer · answered May 11 '22 at 21:57

Add to your container align-content: flex-start;

.container {
  display: block;
  height: 300px;
  width: 500px;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  border: solid;
  flex-wrap: wrap;
  overflow-y: auto;
}
.flex-1 {
  height: 100px;
  width: 100px;
  background-color: blue;
  border: solid;
}

<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>
When there's a whole bunch it works correctly
<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>

FlexBox Squeeze Elements Together

2 Answers2