如何在收缩父级时显示内联块而不在新行上断开它们

Question

我在一个容器（100%宽度）中有2列（内联块）。

>

左侧列必须有一个最小宽度，例如200px，宽度：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

Answer 1

将white-space:nowrap和overflow：hiddit添加到外部：

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

jsFiddle示例