Make table responsive inside a flex container

Question

I have two columns, left column and right column under flex, with ratio of 2 to 4.

right side has long table, when left side reach the min width, the table on the right side become fixed and width doesn't work so the table overflow.

I tried table-layout fixed but it cause the column to overflow on each other.

How can I make the table responsive so it will have oveflow-x auto when scale?

.flexeWarp {
  display: flex;
}
.flexLeft {
  flex: 2 0 0;
  background: red;
}
.flexRight {
  flex: 4 0 0;
}
.table-responsive {
  background: #fff none repeat scroll 0 0;
  margin: 0 0 1em;
  overflow-y: auto;
  padding: 0;
  width: 100%;
  min-height: 0.01%;
  overflow-x: auto;
}
.table {
  margin: auto;
  width: 95%;
}

<div class="flexeWarp">

  <div class="flexLeft">
    some very long texttexttexttextt
  </div>
  <div class="flexRight">
    <div class="table-responsive boxShadow">
      <table class="table tableW longTBL">
        <thead>
          <tr>
            <th>Server</th>
            <th>Database name</th>
            <th class="hidden-xs">Schema</th>
            <th class="hidden-xs">Table name</th>
            <th>Index name</th>
            <th>Index id</th>
            <th>Clustered</th>
            <th>Fill factor</th>
            <th>Scan density</th>
            <th>Logical frag.</th>
            <th>Ext.</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Pitt</td>
            <td>12/3/2016 13:00</td>
            <td>Pitt</td>
            <td class="hidden-xs">DBA Services</td>
            <td class="hidden-xs">New York</td>
            <td>HN300DB</td>
            <td>Last data update - 7 days ago</td>
            <td>HN300DB</td>
            <td>Last data update - 7 days ago</td>
            <td>HN300DB</td>
            <td>Last data update - 7 days ago</td>
          </tr>
          <tr>
            <td>Pitt</td>
            <td>12/3/2016 13:00</td>
            <td>Pitt</td>
            <td class="hidden-xs">DBA Services</td>
            <td class="hidden-xs">New York</td>
            <td>HN300DB</td>
            <td>Last data update - 7 days ago</td>
            <td>HN300DB</td>
            <td>Last data update - 7 days ago</td>
            <td>HN300DB</td>
            <td>Last data update - 7 days ago</td>
          </tr>

        </tbody>
      </table>
    </div>

  </div>
</div>

here is working example: https://jsfiddle.net/c8aymoz5/