title: How to set gaps (gutters) in a flex container?
body: <p>I'm trying to create some kind of universal component of flex container. This component consists of container and its children in a row.</p>
  
  <p>If there are too many children in a line, those who don't have enough space go to second line. It can be easily achieved with flexbox, but also I want to be able to set gutter between elements. And first and last elements of a line shouldn't have left and right margin respectively.</p>
  
  <p>I do this using negative margin technique, but the problem here is that right margin can provoke overflow issues if container is too big. I can solve this problem adding <code>overflow: hidden</code> to cut off negative margin, but it provokes problem with overflowing items inside container (drop-downs, etc).</p>
  
  <p>So now I'm looking for silver bullet, implementation which can satisfy this requirements:</p>
  
  <ul>
  <li>There are multiple items in a row. Width of items can differ.</li>
  <li>If some items have not enough space, they go to next line.</li>
  <li>There is a gap between items (margin), and first and last item doesn't have left and right margin, respectively.</li>
  <li>Inside container can be placed overflowing content (drop-downs), so I can't use <code>overflow: hidden</code></li>
  <li>Css grid and flexbox can be used</li>
  </ul>
  
  <p>Here is my solution of this problem:
  <a href="https://jsbin.com/gabumax" rel="noreferrer">https://jsbin.com/gabumax</a></p>
  
  <p>And here code from example:  </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>.container {
    overflow: hidden;
  }
  
  .wrapper {
    margin: -10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 0 0 auto;
    padding: 10px;
    background-color: red;
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="item"&gt;Width of items can vary&lt;/div&gt;
      &lt;div class="item"&gt;This example works&lt;/div&gt;
      &lt;div class="item"&gt;But there is a problem&lt;/div&gt;
      &lt;div class="item"&gt;Dye to overlow:hidden&lt;/div&gt;
      &lt;div class="item"&gt;It is impossible to place here&lt;/div&gt;
      &lt;div class="item"&gt;Overflowing content&lt;/div&gt;
      &lt;div class="item"&gt;Such as dropdowns&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works, but the only negative point here is <code>overlow: hidden</code>. Because of this I can't place here dropdowns and other overflowing content. </p>
  
  <p>Any better solution? Thanks in advance.</p>