Flex items not wrapping correctly inside my flex contianer

Asked Feb 16 '23 at 21:10

Active Feb 16 '23 at 21:59

Viewed 29 times

I want all items to be equally wide (as wide as the widest item) and wrap to the next line when there is no more space. My following code is however not working because the width of the items is just being set to 1/7th of the container instead of the width of the content inside it. How can I fix?

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(255, 0, 0, 0.3);
  max-width: 25rem;
  gap: 1rem;
  padding: 1rem;
}

.flex-item {
  flex: 1 1 auto;
  width: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 255, 0.3);
}

<div class='flex-container'>
  <div class='flex-item'>A</div>
  <div class='flex-item'>AB</div>
  <div class='flex-item'>ABC</div>
  <div class='flex-item'>ABCD</div>
  <div class='flex-item'>ABCDE</div>
  <div class='flex-item'>ABCDEF</div>
  <div class='flex-item'>ABCDEFG</div>
</div>

asked Feb 16 '23 at 21:10

Oscar R

What's the purpose of the `width: 0`? – Michael Benjamin Feb 16 '23 at 21:32
Also, even once you get it to wrap, you'll face another problem with `flex-grow: 1` – the item will expand the full length of the row (see [here](https://stackoverflow.com/q/42176419/3597276) and [here](https://stackoverflow.com/q/51424852/3597276)). – Michael Benjamin Feb 16 '23 at 21:34
1

Without width: 0, the width is not the same for all of them. After reading the stuff you linked to, it seems what I want just isnt possible unfortunantly. – Oscar R Feb 16 '23 at 21:44
Maybe not with flex. Perhaps with grid. – Michael Benjamin Feb 17 '23 at 15:41

Flex items not wrapping correctly inside my flex contianer

0 Answers0