Как отображать встроенные блоки, не разбивая их на новую строку при сокращении родительского

У меня есть 2 столбца (встроенные блоки) в контейнере (100% ширина).

Левая колонка должна иметь минимальную ширину, скажем, 200 пикселей, ширина: 25%.

Правая колонка имеет ширину: 75%

<style>
.outer {
    width: 100%;
    border: 1px solid black;
}
.left, .right {
    display:inline-block;
}
.left {
    min-width: 200px;
    width: 25%;
    background-color: #dcc2c2;
}
.right {
    width: 75%;
    background-color: #d0dee8;
}
</style>

    <div class="outer">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

До тех пор, пока минимальная ширина не будет достигнута при изменении размера, столбцы будут располагаться рядом друг с другом, что является тем, что я хочу, но после того, как минимальная ширина будет удалена, правый столбец попадает на следующую строку.

Как я могу сделать правый столбец сжатым, но не упасть на следующую строку?

Ссылка на JSFiddle

Ответ 1

Добавьте white-space:nowrap и overflow:hidden в внешний:

.outer {
    width: 100%;
    border: 1px solid black;
    white-space:nowrap;
    overflow:hidden;
}

Пример jsFiddle

Ответ 2

Вы можете использовать calc(100% - 200px) сохранить пробелы для работы!

.right {
    width:75%;
    max-width:calc(100% - 200px);
    background-color: #d0dee8;
}

Fiddle

Информация о css3 calc()