垂直对齐并填充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是可变的并且自动调整大小（与table S上的变体，其注释的不尊重了这一点）;
• 任何flex应该使用（因为IE9不兼容）;
• 块应该垂直中间对齐;
• 块可以做什么（内联，表，单元格等）。

Answer 1

布局的CSS表格和white-space:nowrap关于“autosize”的左/右单元格，因此文本不会换行。

.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