title: How to fix display flex with percent width columns 1px gap?
body: <p>On specific width display flex columns with percent width leave one 1px gap 
  <a href="http://prntscr.com/gyhatt" rel="nofollow noreferrer">http://prntscr.com/gyhatt</a></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>html,
  body {
    margin: 0;
    padding: 0;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .wrapper {
    max-width: 1200px;
    padding: 30px;
  }
  
  .container {
    display: flex;
    flex-wrap: wrap;
    background: red;
  }
  
  .g {
    padding: 30px;
  }
  
  .grid-33 {
    width: 33.3333%;
  }
  
  .grid-50 {
    width: 50%;
  }
  
  .grid-66 {
    width: 66.6666%;
  }
  
  .grid-100 {
    width: 100%;
  }
  
  .white {
    background: #fff;
  }
  
  .yellow {
    background: #ffb401;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="container"&gt;
      &lt;div class="g  white grid-66"&gt;
        &lt;p&gt;Test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="g yellow grid-33"&gt;
        &lt;p&gt;Test&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="http://jsfiddle.net/Themezly/hgtfnLdb/" rel="nofollow noreferrer">fiddle</a></strong> </p>
  
  <p>I have already tried setting the grid-33 at  33.3334% and it does not work plus it is not useful since I am working with a framework and cant "nudge" specific columns to fix an actual layout issue. I was hoping that flex box dimensions would be like display table where px are rounded up but seems like that is not the case.</p>
  
  <p>Any help is appreciated. </p>