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

У меня есть 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

Ответы

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

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