How to display inline blocks without breaking them on new line when shrinking parent

Question

I have 2 columns (inline blocks) in a container (100% width).

1. Left side column has to have a min-width, say 200px, width:25%.

2. Right side column has width: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>
   

Until the min-width is reached when resizing, the columns sit side by side which is what I want, but once the min-width kicks in, the right column falls on the next line.

How can I make the right column to shrink but not fall on the next line ?

Link to JSFiddle

Answer 1

Add white-space:nowrap and overflow:hidden to outer:

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

jsFiddle example