1

I have an flexbox container with a set size, and items which wrap and should be positioned in the container in the total center, but if they overflow the container, the container should scroll vertically. However, their margin causes the first items in the first row to not be fully contained within the scroll container. Does someone know how to fix this?

.container {
  width: 400px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: blue;
  overflow-y: auto;
}

.container > div {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 32px;

}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Lukas Bach
  • 3,559
  • 2
  • 27
  • 31
  • remove `align-content: center;` – Rainbow May 24 '20 at 16:13
  • update `align-content:center;`to `align-content:safe center;` https://developer.mozilla.org/en-US/docs/Web/CSS/align-content scroll down to **safe** keyword definition .FF only – G-Cyrillus May 26 '20 at 19:16

0 Answers0