title: Make the box width(DYNAMIC) fit to its content
body: <p>Please see this code and image. If I resize the window, the red box stretches, but I want the red box's width always just fit for its content. (I do not want empty space at the right side) How to correct this? </p>
  
  <p><a href="https://i.stack.imgur.com/rZ8Za.jpg" rel="nofollow noreferrer">Kindly See Image</a></p>
  
  <p>Please note : <strong>Width</strong> of the container, <strong>widt</strong>h of the items are all <strong>dynamic</strong>, and I cannot hard code a value like 100px;</p>
  
  <p>( <strong>inline-block not working</strong>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   .main {
        border: 10px solid red;
        padding:10px;
        display: flex;
        flex-wrap: wrap;
        background-color:yellow!important;
      }
      
       .main div {
        width: 150px;
        height: 150px;
         border: 1px solid black;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  
      
      &lt;div class="main" &gt;
        &lt;div style="background-color:coral;"&gt;A&lt;/div&gt;
        &lt;div style="background-color:lightblue;"&gt;B&lt;/div&gt;
        &lt;div style="background-color:khaki;"&gt;C&lt;/div&gt;
        &lt;div style="background-color:pink;"&gt;D&lt;/div&gt;
        &lt;div style="background-color:lightgrey;"&gt;E&lt;/div&gt;
        &lt;div style="background-color:lightgreen;"&gt;F&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>