Cách hiển thị các khối nội tuyến mà không vi phạm chúng trên dòng mới khi thu hẹp phụ huynh

Question

Tôi có 2 cột (khối nội tuyến) trong một vùng chứa (chiều rộng 100%).

1. Cột bên trái phải có chiều rộng tối thiểu, 200px, chiều rộng: 25%.

2. cột bên phải có chiều rộng: 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> 
   

Cho đến min-width đạt được khi thay đổi kích thước, các cột ngồi cạnh nhau mà là những gì tôi muốn, nhưng một khi min- chiều rộng đá vào, cột bên phải rơi trên dòng tiếp theo.

Làm cách nào để làm cho cột bên phải co lại nhưng không rơi vào dòng tiếp theo?

Link to JSFiddle

Answer 1

Thêm white-space:nowrap và overflow:hidden đến bên ngoài:

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

jsFiddle example

Answer 2

Bạn có thể sử dụng calc(100% - 200px) giữ chỗ cho nó làm việc!

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

Fiddle

Info about css3 calc()