html - span - Cómo mostrar bloques en línea sin romperlos en una nueva línea al reducir el padre

etiquetas html

Question

Tengo 2 columnas (bloques en línea) en un contenedor (100% de ancho).

1. La columna del lado izquierdo debe tener un ancho mínimo, digamos 200 px, ancho: 25%.

2. La columna lateral derecha tiene ancho: 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>

Hasta que se alcanza el ancho mínimo cuando se cambia el tamaño, las columnas se colocan una al lado de la otra, que es lo que quiero, pero una vez que el ancho mínimo se activa, la columna de la derecha cae en la siguiente línea.

¿Cómo puedo hacer que la columna de la derecha se reduzca pero no caiga en la siguiente línea?

Enlace a JSFiddle

Answer 1

¡Puedes usar calc(100% - 200px) para que funcionen los espacios!

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

Fiddle

Información sobre css3 calc ()

Answer 2

Agregue white-space:nowrap y overflow:hidden al exterior:

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

Ejemplo de jsFiddle