How to prevent a list to overlaps flexbox div [duplicate]-CodePudding

I have a horizontal list that is overlaping its container, but I need that items break line when limits are reached and the item width should fit its content.

How to fix?

.container {
   width: 400px;
   border: 1px solid red;
   padding: 20px;
}

.list {
   display: flex;
}

.item {
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 60px;
   padding: 0 6px;
   border: 1px solid #c5c5c5;
   
   &:not(:last-child) {
      margin-right: 6px;
   }
}

<div class="container">
   <div class="list">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10000000</div> <!-- note that item width not fit content -->
   </div>
</div>

CodePudding user response：

Try adding flex-wrap: wrap to the .list properties.

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