title: responsive separator between divs in flex row container
body: <p>I have a flex container, and some divs inside of it. Each div has some content inside of it, that set the width of this div.  between each of the divs, I want to put a responsive separator-div.</p>
  
  <p>I've tried to give the <code>max-width</code> property for each of the <code>responsive</code> class in the code below, but it not rendering.
  I cannot give the <code>inner-wrapper</code>'s a fixed width, because it depends on the width of the <code>inner{#}</code>.</p>
  
  <pre><code>&lt;div class='main'&gt;
    &lt;div class='item-wrapper'&gt;
      &lt;div class='inner1'&gt;&lt;/div&gt;
      &lt;div class='responsive'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='item-wrapper'&gt;
      &lt;div class='inner2'&gt;&lt;/div&gt;
      &lt;div class='responsive'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='item-wrapper'&gt;
      &lt;div class='inner3'&gt;&lt;/div&gt;
      &lt;div class='responsive'&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>.main{
    width:100%;
    display:flex;
    height:40px;
    background:yellow;
  }
  .responsive{
    max-width:200px;
  }
  
  .item-wrapper{
    display:flex;
    height:100%;
    background:green;
  }
  </code></pre>
  
  <p>to summarize, i expect:</p>
  
  <p>div1 -------------- div2 --------------- div3</p>
  
  <p>such that only the width of the '------' will increase/decrease if i resizing my screen</p>