title: Flexbox not respecting width
body: <p>I'm trying to get my head around flexbox only I can't quite figure some things out. </p>
  
  <p>I've built a layout that has a left column of 290px and a right 'content area'. </p>
  
  <p>I want the content area to be fluid and both to be 100% in height. I've somewhat achieved this, but if I populate the content area with something with a width of 100vw it pushes the left column down in size.</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>.right_col {
    min-height: 792px;
    height: 100%;
    margin-left: 0px;
    background: #F7F7F7;
    display: flex;
    padding: 0 !important;
    width: 100%;
  }
  .callout-panel {
    background: #fff;
    width: 290px;
    float: none;
    clear: both;
    padding: 0 20px;
  }
  .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
  }
  .input-group .form-control,
  .input-group-addon,
  .input-group-btn {
    display: table-cell;
  }
  .input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100vw;
    margin-bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="right_col"&gt;
    &lt;div class="callout-panel"&gt;Left column&lt;/div&gt;
    &lt;section class="page-inner"&gt;
      &lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search"&gt;
        &lt;span class="input-group-btn"&gt;
               &lt;button class=" btn-search" type="button" &gt;&lt;/button&gt;
         &lt;/span&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>