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

Question

我在容器中有2列(内联块)(100%宽度).

1. 左侧列必须具有最小宽度,例如200px,宽度:25%.

2. 右侧柱宽: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:hidden到外:

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

jsFiddle例子

Answer 2

你可以使用calc(100% - 200px)保留空间来工作!

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

小提琴

有关css3 calc()的信息