How to make a flex box width the same as content when content wraps

Question

I need to make a div's width with a class grid the same as content (items).

But when the items wrap to the next line I need to shrink the div accordingly, so I don't have any extra space on the left and of the right of items.

Thanks in advance !

.home {
  height: 100vh;
  display: flex;
  align-items: center;
}
.grid {

    flex-basis: content;
  display: flex;
  background-color: red;
  flex-wrap: wrap;

}
.gridItem {
  margin: 2px;
  width: 90px;
  height: 60px;  
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
};

<div class='home'>
  <div class='grid'>
    <div class='gridItem'>Item 1</div>
    <div class='gridItem'>Item 1</div>
    <div class='gridItem'>Item 1</div>
    <div class='gridItem'>Item 1</div>
    <div class='gridItem'>Item 1</div>
    <div class='gridItem'>Item 1</div>
    <div class='gridItem'>Item 1</div>
  </div>
</div>