Expend div width with contents

Question

I want my items .item to be aligned to the left inside #item-wrapper and that to be centered inside .items div. It's kind of working, but when I resize the window, #item-wrapper hasn't the correct width anymore

.items {
    text-align: center;
    box-sizing: border-box;
    width: 80vw;
    margin: auto;
    padding: 10px;
    display: flex;
    background: red;
}

#items-wrapper {
    margin: auto;
    text-align: left;
    font-size: 0;
    background: green;
}

.item {
    box-sizing: border-box;
    width: 250px;
    height: 250px;
    display: inline-block;       
    background: blue;
    border: 1px solid black;
}

<div class="items">
    <div id="items-wrapper">
        <div id="item01" class="item"></div>
        <div id="item02" class="item"></div>
        <div id="item03" class="item"></div>
    </div>
</div>

@Paulie_D I think OP means as wide as the number of items on the line - when it wraps, the wrapper becomes 100% width — Pete, Nov 19 '18 at 11:47
Then this - https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Nov 19 '18 at 11:55
can you add an image or something that can show what is the desired result you want? Do you want the blue squares to be always in a single row with same width? Please, be more clear — Calvin Nunes, Nov 19 '18 at 11:56
Think it's more like this: https://stackoverflow.com/questions/28876653/css-centering-dynamic-div/28876722#28876722 — Pete, Nov 19 '18 at 11:58
You can see that when the items wrap on another line, the item-wrapper has some white space between the last item on the line and its edge. So when I take it to this colored example, when the 3rd item in on next line, there is a space next to the second item (last item on the fist line) — GuinarOS, Nov 19 '18 at 13:03
To remove that gap you need a script, as a parent element has no idea when its children wrap and adjust accordingly. — Asons, Nov 19 '18 at 13:04

score -1 · Answer 1 · answered Nov 19 '18 at 12:42

.items {
        text-align: center;
        box-sizing: border-box;
        width:80%;
        margin: auto;
        padding: 10px;
        display: flex;
        background: red;
      }

#items-wrapper
  {
    margin: auto;
    text-align: left;
    font-size: 0;
    background: green;
   } 
 .item {
      box-sizing: border-box;
      width:32%px;
      height:32%px;
      display: inline-block;
      background: blue;
      border: 1px solid black;
   }

if you want to stop you div item to some size you can give min-width: for example 100px;

Expend div width with contents

1 Answers1