Ngăn không cho hộp thu nhỏ bị thu hẹp

Question

Tôi đang sử dụng flexbox để bố cục một trang vì hành vi ngày càng tăng là rất hữu ích. Nhưng tôi muốn hoàn toàn ngăn chặn hành vi thu hẹp .

Dù sao để quản lý việc này?

Ví dụ mã:

<div class="flex-vertical-container"> 
    <div class="flex-box"> 
     This one should grow but not shrink 
    </div> 
    <div></div> 
    <div></div> 
</div> 

CSS

.flex-vertical-container { 
    display: flex; 
    flex-direction: column; 
} 

.flex-box { 
    flex: 1; 
} 

Answer 1

Cố gắng thiết lập các flex-shrink tài sản để 0 trên .flex-box.

Answer 2

Thêm min-width với bất kỳ thứ gì bạn muốn có giá trị nhỏ nhất có thể có của hộp. Flexbox sẽ không thu nhỏ chiều rộng dưới độ rộng tối thiểu.