Html 收缩父对象时，如何显示内联块而不在新行上打断它们

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

左侧列必须具有最小宽度，例如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>

.外部{
宽度：100%；
边框：1px纯黑；
}
.左，.右{
显示：内联块；
}
.左{
最小宽度：200px；
宽度：25%；
背景色：#dcc2c2；
}
.对{
宽度：75%；
背景色：#D08；
}
左边
正确的

在调整大小时达到最小宽度之前，列并排放置，这正是我想要的，但一旦最小宽度生效，右列将落在下一行

如何使正确的列收缩但不落在下一行

---

将

空白：nowrap

和

溢出：隐藏添加到外部：

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

您可以使用
calc（100%-200px）
保留空间让它工作

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


您可以使用
calc（）
来限制右栏的
最大宽度
，但是
calc（）
不受IE8（及以下）支持。请记住，它在IE8或更早版本中不起作用（请参阅我的答案中有关css3 calc（）链接的信息）。如果这对你有效，请接受我的回答。否则接受@j08691Yea，知道它在IE8或更高版本中不起作用，再次感谢您的提醒。但正如您所说的@j08691的解决方案似乎也在发挥作用。Calc很好，只是要注意，如果经常使用，它的性能可能会很高。这适用于大多数面向数学的功能。最佳解决方案我尝试了flex，也得出了准确的百分比，但这是我整个星期看到的最佳答案。正如您在这里看到的，您的修复方案并不适用于所有情况：我刚刚遇到了这个神奇的解决方案，并四处搜索，这是我找到的最接近的解决方案，让这更加神秘。你有什么可以解释为什么这样做吗？如果你使用一个迷你程序或编译器，比如Webpack，你不必担心换行符会产生空白。