Comment afficher les blocs en ligne sans les casser sur une nouvelle ligne lors de la réduction du parent

Question

J'ai 2 colonnes (blocs en ligne) dans un conteneur (largeur 100%).

1. La colonne de gauche doit avoir une largeur minimale, disons 200 pixels, largeur: 25%.

2. La colonne de droite a une largeur: 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>
   

Jusqu'à ce que la largeur minimale soit atteinte lors du redimensionnement, les colonnes sont côte à côte, ce que je veux, mais une fois la largeur minimale activée, la colonne de droite tombe sur la ligne suivante.

Comment puis-je faire rétrécir la colonne de droite sans tomber sur la ligne suivante?

Lien vers JSFiddle

Answer 1

Ajouter white-space:nowrap et overflow:hidden vers l'extérieur:

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

exemple jsFiddle

Answer 2

Vous pouvez utiliser calc(100% - 200px) garder des espaces pour que cela fonctionne!

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

Violon

Informations sur css3 calc ()