Вертикально выровнять и заполнить оставшееся пространство из 3-х блоков

Question

Мне нужно выровнять по вертикали 3 блока, где центральный блок должен взять оставшееся пространство, а боковые блоки будут авторизоваться.

Мой код (PEN):

.parent { 
 
    background: lightgray; 
 
    //display: table; 
 
} 
 

 
[class|="i"] { 
 
    display: inline-block; 
 
    //display: table-cell; 
 
    padding: 5px; 
 
    margin: 0; 
 
} 
 

 
.i-left { 
 
    background: green; 
 
} 
 

 
.i-full { 
 
    background: lightgreen; 
 
    width: 30%; 
 
    vertical-align: middle; 
 
} 
 

 
.i-right { 
 
    background: lightblue; 
 
}

<div class="parent"> 
 
    <div class="i-left">[min space left long size]</div> 
 
    <div class="i-full"> 
 
     [long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row] 
 
    </div> 
 
    <div class="i-right">[min space right]</div> 
 
</div>

=== Ограничения

• любой фиксированный размер должен быть наведены;
• боковые блоки widht является переменной и autosized (вариант с table с, который закомментированный не уважает эту точку);
• любой flex должен использоваться (поскольку несовместимость IE99);
• блоки должны быть вертикально выровнены по середине;
• блоки могут иметь все (встроенные, таблицы, ячейки и т. Д.).

Answer 1

Таблицы CSS для макета и white-space:nowrap на «авторазрезать» левую/правую ячейки, чтобы текст не обертывался.

.parent { 
 
    background: lightgray; 
 
    display: table; 
 
} 
 
[class|="i"] { 
 
    display: table-cell; 
 
    padding: 5px; 
 
    margin: 0; 
 
    vertical-align: middle; 
 
} 
 
.i-left { 
 
    background: green; 
 
    white-space: nowrap 
 
} 
 
.i-full { 
 
    background: lightgreen; 
 
} 
 
.i-right { 
 
    background: lightblue; 
 
    white-space: nowrap 
 
}

<div class="parent"> 
 
    <div class="i-left">[min space left long size]</div> 
 
    <div class="i-full"> 
 
    [long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill the row long content to fill 
 
    the row] 
 
    </div> 
 
    <div class="i-right">[min space right]</div> 
 
</div>

Codepen Demo