How make flexible blocks without flexbox for old IE

Question

There is a question about simple form, with input and button, Цe need a block filled 100% of the available space inside the box in which there may be other elements, without their wraps.

This is easily done with the flexbox, but it does not support IE 8-9. Please help me. thx, Eugene.

Answer 1

Using CSS table layout should give you flexibility depending of content: http://jsfiddle.net/37rxjskx/

.row {
    display: table;
    /* table-layout: fixed; */
    /* width: 100%; */
}

.col,
button {
    display: table-cell;
    padding: 8px 12px;
    outline: 1px dashed red;
}

<div class="row">
    <div class="col">input auto 100% of the free width space</div>
    <button type="submit">button<br> auto of the<br> inner content</button>
</div>

table-layout: fixed does the opposite: make browsers apply your constraints of width and ignore relative quantity of content.

Various previous answers I did on the same subject: equal width, same height, fill remaining space