Why doesn't flexbox shrink to fit after wrapping elements? [duplicate]

Answer 1

You can't achieve exactly what you're asking with CSS alone. What you can do it set the max number of items you want to show per row, and then calculate a max-width that you pass to your flexbox container:

:root{
   --item-width: 100px;
   --max-per-row: 4;
   --max-width: calc( var(--max-per-row) * ( var(--item-width) + 1px)  );
}

With this code you can set your container's width to whatever you want, say 500px, and then make sure the max width is n * a flexbox item's width (plus 1 for border), where n is the number of items you want per row. Just make sure the flexbox width is greater than the max-width.

:root{
   --item-width: 100px;
   --max-per-row: 4;
   --max-width: calc( var(--max-per-row) * ( var(--item-width) + 1px)  );
}

body {
  background: black;
}

.holder {
  width: 650px;
  background: gray;
  margin-top: 50px;
}

.flexbox {
  display: flex;
  background: blue;
  width: 500px;
  max-width: var(--max-width);
  flex-wrap: wrap;
}

.item {
  width: var(--item-width);
  height: 50px;
  background: red;
  border: 1px dotted white;
  border-left: none;
}
.item.wide {
  width: 200px;
}