Flexbox, занимающий 50% оставшегося места вне зависимости от содержимого

Question

Этот вопрос является продолжением темы Table-элементы: занять оставшееся место по высоте. Было предложено решение на основе flex-box для макета с одной колонкой фиксированной длины и ещё двумя, занимающими по 50% оставшегося места каждая:

Проблема, с которой я столкнулся: если внутри средней колонки поместить таблицу, то при больших размерах экрана она будет больше, чем незаполненная правая (пример кода). Это несмотря на то, что мы установили колонкам одинаковый flex-grow.

<div class="container">
  <div class="container_columns">
    <div class="constant-width-column">1</div>
      <div class="var-width-column">
        <div class="flex-container">
          <table>
            <tr>
              <td rowspan="3">
                <img src="http://blog.caranddriver.com/wp-content/uploads/2013/05/lamborghini_egoista_three_quarter_front_view.jpg">
              </td>
              <td>Lamborgini Egoista</td>
            </tr>
            <tr><td>Concept year: 2013</td></tr>
            <tr><td>Comment: </td></tr>
          </table>
      </div>
    </div>
    <div class="var-width-column">3</div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color:#778899;
}

.container_columns {
  flex-grow: 1;
  display: flex;
  background: #FFB6C1;
}

.constant-width-column{
  width: 50px;
  padding: 5px;
}

.var-width-column {
  flex-grow: 1;
  padding: 5px;
  min-width: 450px;
}

.var-width-column:first-child{
    background: #87CEFA;    
  }

.var-width-column:nth-child(2){
    background: #90EE90;
  }

.var-width-column >div{
    display: flex;
    flex-direction: column;
    height: 100%;
  }


.flex-container{
  table{
    background-color: #800080;
      tr{
        &:first-child{
          td{
            text-align: center;
            vertical-align: middle;
            width: 15%;
            padding: 3px 0;
            color: white;
            img{
              width: 80%;
            }
          }
        }
      }
    }
}

.flex-container table{
  background-color: #800080;
  color:white;
}

.flex-container table tr:first-child td{  
  text-align: center;
  vertical-align: middle;
  width: 15%;
  padding: 3px 0;
  color: white;
}

.flex-container table tr:first-child td img{  
  width: 80%;
}

Каким образом обеспечить одинаковый размер средней и правой колонки при любых ширинах экрана вне зависимости от содержимого? Напомню, что средняя и правая колонки должны занимать по половине оставленного левой колонкой пространства, но быть не меньше установленной минимальной ширины.

Заранее спасибо за ответы.

Answer 1

.container {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
}
.constant-width-column {
  flex-grow: 0;
  flex-shrink: 0;
}
.var-width-column {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 1px;
  overflow: auto;
}
.container > *:nth-child(1) {
  background-color: red;
}
.container > *:nth-child(3) {
  background-color: lightblue;
}

<div class="container">
  <div class="constant-width-column">1</div>
  <div class="var-width-column">
     <table>
        <tr>
          <td rowspan="3">
            <img src="http://blog.caranddriver.com/wp-content/uploads/2013/05/lamborghini_egoista_three_quarter_front_view.jpg">
          </td>
          <td>Lamborgini Egoista</td>
       </tr>
       <tr><td>Concept year: 2013</td></tr>
       <tr><td>Comment: </td></tr>
    </table>
  </div>
  <div class="var-width-column">3</div>
</div>

flex-basis: 0 и например min-width: 1px заставит делиться свободным пространством поровну. Главное придать колонкам одинаковую ширину, иначе ничего не получится.
overflow надо задать такой, чтобы большой контент на вылазил и не накрывал соседнюю колонку. auto, hidden - какой больше нравится.