title: CSS Flexbox annoying slight offset of row elements
body: <p>So I have two divs in a full width container that I want to give variable sizing with flexbox, but no matter what I do, there is an annoying offset at the bottom. Using margins I can come close to fixing the problem, but it's never perfect.</p>
  
  <p>If you run the code snippet below and scroll to the bottom you can see it, the image and the black content container are not aligned at the bottom.</p>
  
  <p>What's going on?</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 {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
  }
  
  #image-wrapper {
      flex-grow: 3;
      max-width: 1000px;
      position: relative;
      /*background-color: black;*/
  }
  
  #menu {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px;
      background-color: #101010;
      color: #fefefe;
      align-items: stretch;
      display: flex;
      margin-bottom:7px;
  }
  
  #form {
      width: 100px;
  }
  
  #image {
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  
    &lt;div id="image-wrapper"&gt;
      &lt;img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/&gt;
    &lt;/div&gt;
  
    &lt;div id="menu"&gt;
      &lt;div id="form"&gt;
        CONTENT&lt;br&gt;CONTENT&lt;br&gt;
        
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/container&gt;</code></pre>
  </div>
  </div>
  </p>