Show a list of item inside a container with full height

Question

I've a div container (the grey one), with contains some children with a flex display. The container can scroll vertically.

The height of the gray container should be the same as the window.

.container {
  width: 500px;
  height: 100vh;
  background-color: lightgrey;
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 1px solid orange;
}

<div class="container">
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
</div>

If you run the snippet, you can see the result: each item is near another item and the container scrolls.

The problem is that if I remove some items (their number is dynamic), there is extra space between items. Why?

I don't want this extra space, how can I "remove" it?

Roman Gavrilov · Answer 1 · 2023-02-17T14:28:08.490

0

Because container height is 100vh. if you update it like height:auto, this issue will be fixed. Or items list should be wrapped by another element like below code. it's working

.container {
  width: 500px;
  height: 100vh;
  background-color: lightgrey;
  padding: 10px;
  overflow: auto;
}

.items {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 1px solid orange;
}

<div class="container">
  <div class="items">
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
  </div>
</div>

edited Feb 17 '23 at 14:28

answered Feb 17 '23 at 14:20

Roman Gavrilov

620
4
17

Ok, but its height should be the same as the window – whitecircle Feb 17 '23 at 14:21
1

@whitecircle then as my updated codes, items elements should be wrapped by another element – Roman Gavrilov Feb 17 '23 at 14:28
@RomanGavrilov, adding an inner layer helps remove extra spaces between lines; on the other hand, with `align-contents: flex-start`, it achieves the same without the need of additional layer. – Tianzhen Lin Feb 17 '23 at 19:45

score 0 · Accepted Answer · answered Feb 17 '23 at 14:38

When using flex-wrap: wrap, the contents are grouped into "lines" of contents known as flex lines, the align-content property controls how the flex lines are packed. In your case, setting align-content: flex-start; would achieve your needs.

visualization of align-content settings

^{Source W3C}

.container {
  width: 500px;
  height: 100vh;
  background-color: lightgrey;
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item {
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 1px solid orange;
}

<div class="container">
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
</div>

Credit: This answer is inspired by another Stack Overflow post How does flex-wrap work with align-self,align-items and align-content

Show a list of item inside a container with full height

2 Answers2